在 Vue.js 开发中，Vue Router 是一个非常重要的插件，它用于进行页面路由管理，使得我们能够快速构建单页应用（SPA，Single Page Application）。本文将介绍 Vue Router 的基本用法以及一些实践经验，帮助你更好地使用和理解 Vue Router。
1. 安装和引入
首先，我们需要通过 npm 安装 Vue Router：
npm install vue-router
然后，在项目的入口文件（一般是 main.js）中引入 Vue Router，并将其作为 Vue 的插件使用：
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
2. 配置路由
接下来，我们需要定义路由，并将其配置到 Vue Router 中。可以在项目根目录下创建一个 router.js 文件来统一管理路由配置。
import VueRouter from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About },
]
const router = new VueRouter({
routes
})
export default router
在上述代码中，我们先引入 VueRouter，并创建一个空数组 routes 用于存放路由配置。每个路由对象都需要指定一个 path 属性以及对应的组件 component。
最后，我们利用 VueRouter 的构造函数创建一个实例，将 routes 作为参数传入，并将其导出。
3. 使用路由
在项目中使用路由非常简单，只需在 Vue 实例中引入之前定义的 router 实例，并将其作为 Vue 的一个选项即可。
import Vue from 'vue'
import App from './App.vue'
import router from './router'
new Vue({
router,
render: h => h(App)
}).$mount('#app')
以上代码中，我们先引入之前定义的 router 实例，然后在 Vue 实例的 router 选项中传入 router 实例。
4. 路由导航
Vue Router 提供了一些方法来进行页面导航控制，其中最常见的就是使用 <router-link> 组件来呈现路由链接。
在模板中使用 <router-link> 组件：
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-link> 组件会渲染成一个 <a> 标签，并自动添加 to 属性值作为链接地址。
另外，我们还可以通过 this.$router 来进行编程式的路由导航，实现更灵活的跳转。
methods: {
goToAbout() {
this.$router.push('/about')
}
}
5. 路由参数和动态路由
有时，我们需要根据不同的参数值来显示不同的内容或页面。Vue Router 允许我们在路由路径中使用动态路由参数。
const routes = [
{ path: '/user/:id', component: User }
]
上述代码中，我们定义了一个动态路由参数 :id，在路由路径中使用了冒号(:)进行标识。
在组件内部，可以通过 $route.params 对象来获取当前路由的参数值。
const User = {
template: `
<div>
User ID: {{ $route.params.id }}
</div>
`
}
6. 嵌套路由
Vue Router 可以支持嵌套路由，这样我们可以组织和管理更复杂的页面结构。
const routes = [
{
path: '/dashboard',
component: Dashboard,
children: [
{ path: 'home', component: Home },
{ path: 'about', component: About }
]
}
]
上述代码中，我们定义了一个父级路由 /dashboard，其下包含了两个子路由 home 和 about。
在父级组件的模板中，可以通过 <router-view> 组件来渲染子路由对应的组件。
<template>
<div>
<h1>Dashboard</h1>
<router-link to="/dashboard/home">Home</router-link>
<router-link to="/dashboard/about">About</router-link>
<router-view></router-view>
</div>
</template>
7. 路由守卫
路由守卫是用于拦截导航的钩子函数，我们可以在路由跳转前后执行自定义逻辑，实现控制权限、处理登录状态等功能。
Vue Router 共提供了三种类型的路由守卫：
- 全局前置守卫：
beforeEach - 全局解析守卫：
beforeResolve - 全局后置守卫：
afterEach
router.beforeEach((to, from, next) => {
// 在路由跳转前执行逻辑
next()
})
router.beforeResolve((to, from, next) => {
// 在路由解析前执行逻辑
next()
})
router.afterEach((to, from) => {
// 在路由跳转后执行逻辑
})
以上代码中，to 表示即将进入的路由对象，from 表示当前导航正要离开的路由。
通过调用 next() 方法，可以指定是否允许或阻止路由跳转。如果不调用 next() 方法，则路由会被拦截。
8. 结语
Vue Router 是 Vue.js 中非常强大且常用的插件，掌握其基本用法以及相关实践经验，能够提高开发效率并使单页应用的页面管理更加清晰和灵活。希望本文对你学习和使用 Vue Router 有所帮助。如果有任何疑问或建议，请留言讨论。
本文来自极简博客，作者：柠檬味的夏天，转载请注明原文链接：Vue Router 的使用与实践
