Vue Router 是 Vue.js 的官方路由管理器，它允许我们通过路由来构建单页面应用（SPA）并实现页面间的导航。它与 Vue.js 深度集成，提供了简洁灵活的 API 和丰富的功能，使得我们能够轻松处理复杂的路由需求。
在本文中，我们将学习如何使用 Vue Router 进行路由管理，包括以下内容：
- 安装和配置 Vue Router
- 创建路由实例
- 定义路由和组件
- 在 Vue 实例中使用路由
- 导航和路由传参
- 路由懒加载
- 导航守卫
1. 安装和配置 Vue Router
首先，我们需要在项目中安装 Vue Router。可以使用 npm 或 yarn 安装：
npm install vue-router
# 或
yarn add vue-router
安装完成后，我们需要在 main.js（或其他入口文件）中配置 Vue Router。首先引入 Vue Router：
import Vue from 'vue'
import VueRouter from 'vue-router'
然后通过 Vue.use() 方法来使用 Vue Router 插件：
Vue.use(VueRouter)
接下来，我们可以创建一个路由实例并传入相关的路由配置。
2. 创建路由实例
在创建路由实例之前，我们需要引入相关的组件。创建一个名为 Home.vue 的组件，并在 main.js 中引入：
import Home from './components/Home.vue'
然后我们可以创建一个路由实例，并传入相关的路由配置：
const router = new VueRouter({
routes: [
{
path: '/',
name: 'home',
component: Home
}
]
})
在这个例子中，我们定义了一个名为 home 的路由，它的路径是 /，对应的组件是 Home。
3. 定义路由和组件
在路由配置中，我们可以定义多个路由和对应的组件。例如，我们可以添加一个名为 about 的路由：
import About from './components/About.vue'
const router = new VueRouter({
routes: [
// ...
{
path: '/about',
name: 'about',
component: About
}
]
})
同样地，我们需要在 main.js 中引入 About.vue 组件：
import About from './components/About.vue'
4. 在 Vue 实例中使用路由
在创建了路由实例后，我们需要将其挂载到 Vue 实例上。在 main.js 文件中，我们可以这样做：
new Vue({
router,
render: h => h(App)
}).$mount('#app')
这样一来，我们就可以在 App.vue 组件中使用路由了。为了显示路由内容，我们可以在 App.vue 的模版中添加一个 <router-view> 组件：
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
现在，当我们访问 / 路径时，将会显示 Home 组件，当访问 /about 路径时，将会显示 About 组件。
5. 导航和路由传参
Vue Router 为我们提供了导航相关的 API 来实现页面间的跳转。我们可以通过 <router-link> 组件来创建导航链接，例如：
<template>
<div id="app">
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-view></router-view>
</div>
</template>
在这个例子中，我们使用了两个 <router-link> 组件分别跳转到 / 和 /about 路径。
如果我们需要传递参数给路由，可以在 <router-link> 中使用 to 属性的对象形式传递参数。例如，我们可以传递一个 userId 参数给 User 组件：
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
然后在路由配置中定义一个名为 user 的路由，并接收 userId 参数：
const router = new VueRouter({
routes: [
// ...
{
path: '/user/:userId',
name: 'user',
component: User
}
]
})
6. 路由懒加载
当我们的网站变得越来越大时，加载整个应用的 JavaScript 可能会影响性能。这时，我们可以将路由组件进行懒加载，使其在需要的时候才加载。
使用路由懒加载非常简单，只需使用 import() 函数来延迟加载组件。例如：
const Home = () => import('./components/Home.vue')
const About = () => import('./components/About.vue')
这样配置后，只有当访问 /home 或 /about 路径时，才会加载 Home 或 About 组件。
7. 导航守卫
Vue Router 还提供了导航守卫（Navigation Guards）来控制页面的导航。导航守卫可以在路由切换前后执行相关的逻辑。
例如，我们可以在切换路由前进行身份验证，并阻止未认证用户访问受保护的页面：
router.beforeEach((to, from, next) => {
const isAuthenticated = // 根据实际情况进行身份验证
if (to.name === 'protected' && !isAuthenticated) next({ name: 'login' })
else next()
})
在这个例子中，我们判断用户是否已认证，如果没有，则跳转到 login 路由。
除了 beforeEach，Vue Router 还提供了其他的导航守卫，如 beforeResolve、afterEach 等，可以根据实际需求来使用。
以上就是使用 Vue Router 进行路由管理的基本使用方法。通过学习和实践，相信你已经掌握了 Vue Router 的基础知识。在实际项目中，你可以根据需求使用其他功能和技巧来更好地管理路由。
如果你想了解更多关于 Vue Router 的内容，请参考 Vue Router 的官方文档。
感谢阅读！
本文来自极简博客，作者：天使之翼，转载请注明原文链接：如何使用Vue Router进行路由管理
