【前端 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版本为例：

npm install vue-router@3.5.1

在main.js中引入并使用Vue Router

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

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路径与组件之间的映射关系。

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知道在哪里渲染对应的路由组件。

<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属性指定目标路由。

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

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