【前端 21】Vue Router路由配置

Vue Router路由配置

在Vue.js项目中,Vue Router是官方提供的路由管理器,用于构建单页面应用(SPA)。它允许我们通过不同的URL访问不同的页面组件,而无需重新加载页面。下面,我将详细介绍如何在Vue项目中配置和使用Vue Router。

安装Vue Router

首先,确保你已经安装了Vue CLI并创建了一个Vue项目。如果项目是在创建时没有勾选路由功能,你可以通过npm手动安装Vue Router。这里以安装Vue Router 3.5.1版本为例:

bash 复制代码
npm install [email protected]

main.js中引入并使用Vue Router

安装完Vue Router后,你需要在main.js(或项目的入口文件)中引入并使用它。同时,确保将router实例传递给Vue实例。

javascript 复制代码
import Vue from 'vue'  
import App from './App.vue'  
import router from './router' // 引入router  
  
Vue.config.productionTip = false  
  
new Vue({  
  router, // 将router实例注入到vue根实例  
  render: h => h(App)  
}).$mount('#app')

配置路由表

接下来,在src/router/index.js(或你定义的router文件)中配置路由表。路由表定义了URL路径与组件之间的映射关系。

javascript 复制代码
import Vue from 'vue'  
import Router from 'vue-router'  
import DeptView from '../views/system/DeptView.vue'  
  
Vue.use(Router)  
  
export default new Router({  
  routes: [  
    {  
      path: '/',  
      redirect: '/dept' // 访问根路径时重定向到/dept  
    },  
    {  
      path: '/dept',  
      name: 'dept',  
      component: DeptView // 当访问/dept时,加载DeptView组件  
    }  
    // 可以继续添加更多路由配置  
  ]  
})

在路由配置中,path定义了URL路径,redirect用于路径重定向,name为路由命名(方便编程式导航),component则是对应路径应该渲染的Vue组件。

App.vue中使用<router-view></router-view>

<router-view></router-view>是Vue Router的一个非常重要的组件,它用于渲染匹配的组件。在App.vue的模板中,你需要加入这个组件,以便Vue Router知道在哪里渲染对应的路由组件。

vue 复制代码
<template>  
  <div id="app">  
    <!-- 路由出口 -->  
    <router-view></router-view>  
  </div>  
</template>  
  
<script>  
export default {  
  name: 'App'  
}  
</script>  
  
<style>  
/* 你的样式 */  
</style>

使用<router-link>切换路由

最后,你可以使用<router-link>组件来创建导航链接,实现用户点击链接时切换路由。<router-link>默认会被渲染成一个<a>标签,并且可以通过to属性指定目标路由。

vue 复制代码
<template>  
  <div>  
    <!-- 使用router-link进行路由导航 -->  
    <router-link to="/">首页</router-link>  
    <router-link to="/dept">部门管理</router-link>  
  </div>  
</template>

以上就是在Vue项目中配置和使用Vue Router的基本步骤。通过Vue Router,你可以轻松构建出结构清晰、易于维护的单页面应用。

相关推荐
Niuguangshuo6 分钟前
Python设计模式:责任链模式
开发语言·python·责任链模式
甄霓裳8 分钟前
APL语言的游戏音效
开发语言·后端·golang
前端极客探险家22 分钟前
如何用 Three.js 和 Vue 3 实现 3D 商品展示
javascript·vue.js·3d
Billy Qin31 分钟前
Shell四种配置文件的区别(~/.bashrc ~/.bash_profile ~/.zshrc ~/.profile)
开发语言·bash
JQLvopkk1 小时前
C#中编写TCP客户端和服务端
开发语言·tcp/ip·c#
꧁坚持很酷꧂1 小时前
Qt远程连接数据库,注册,登录
开发语言·数据库·qt
十五年专注C++开发1 小时前
QT 中的元对象系统(五):QMetaObject::invokeMethod的使用和实现原理
开发语言·数据结构·c++·qt·设计模式
weixin_428498491 小时前
使用MATIO库读取Matlab数据文件中的多维数组
开发语言·matlab
我是小路路呀1 小时前
vue开始时间小于结束时间,时间格式:年月日时分
前端·javascript·vue.js
虾球xz1 小时前
游戏引擎学习第201天
前端·学习·游戏引擎