随着前端框架的不断发展，越来越多的单页面应用(SPA)出现。SPA 框架具有高效、快速的特点，因此被广泛应用于企业级应用程序中。Vue.js 作为一个流行的前端框架，也提供了 Vue-Router 这个插件来支持 SPA。
本文将介绍如何在 Vue.js 中使用 Vue-Router 实现 SPA。以及如何通过 Vue-Router 来管理路由，并提供一个完整的 Vue-Router 示例代码。
什么是 Vue-Router?
Vue-Router 是 Vue.js 的官方插件，它提供了在 Vue.js 单页面应用程序中添加路由和视图的功能。Vue-Router 使用了 Vue.js 核心的响应式机制，让路由和组件之间的交互变得更加灵活。
Vue-Router 是基于组件的，这意味着路由是映射到组件中的。我们可以根据需要创建多个路由，每个路由都映射到一个组件中。这样，我们就可以使用 Vue.js 提供的组件化模式来构建单页面应用。
Vue-Router 基本用法
开始使用 Vue-Router，首先需要安装 Vue-Router。
npm install vue-router --save
Vue-Router 的基本用法包括以下 3 个步骤：
- 创建路由组件
- 配置路由
- 将路由添加到 Vue 实例中
下面，我们将分别介绍这 3 个步骤。
创建路由组件
在 Vue.js 中，路由实际上是映射到组件中的。因此，在使用 Vue-Router 时，我们需要先创建路由组件。
这些组件可以是以 .vue 文件形式创建的单文件组件，也可以是通过 Vue.extend() 动态创建的组件。
下面的代码演示了如何创建一个路由组件：
// javascriptcn.com 代码示例
<!-- HelloWorld.vue -->
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<style scoped>
h1 {
font-weight: bold;
}
</style>配置路由
Vue-Router 的核心功能是路由映射。因此，在使用 Vue-Router 时，我们需要配置路由映射。
可以通过创建一个路由映射表来配置路由。
下面是一个例子，展示如何通过路由表来配置路由：
// javascriptcn.com 代码示例
import Vue from 'vue'
import VueRouter from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
const router = new VueRouter({
mode: 'history',
routes
})
export default router上面的代码中，我们首先导入 Vue、Vue-Router 和我们创建的路由组件 HelloWorld.vue。
接下来，我们使用 Vue.use(VueRouter) 来启用 Vue-Router，并定义一个路由映射表。
这个路由映射表将 path '/' 映射到 HelloWorld 组件上，并定义了一个名为 HelloWorld 的路由。
我们最后创建了一个新的 VueRouter 实例，并将路由映射表配置到其中。
将路由添加到 Vue 实例
最后一步是将我们创建的路由添加到 Vue 实例中。
这样，我们就可以在单页面应用中使用 Vue-Router 了。
下面是一个例子，展示了如何将路由添加到 Vue 实例中：
// javascriptcn.com 代码示例
import Vue from 'vue'
import App from './App.vue'
import router from './router'
new Vue({
el: '#app',
router,
render: h => h(App)
})上面的代码中，我们通过 import 导入了我们定义的路由，并将它添加到 Vue 实例中。
这样，我们就可以在 App.vue 中使用路由了。
Vue-Router 更高级的功能
Vue-Router 还提供了更高级的功能，如路由守卫、动态路由和嵌套路由等。
1. 路由守卫
路由守卫是一种控制路由访问权限的机制。Vue-Router 提供了一些路由守卫，可以用于控制路由的访问权限。
路由守卫有三个生命周期函数：
- router.beforeEach()：在路由切换前触发，可以用于控制路由访问权限。
- router.afterEach()：在路由切换后触发。
- router.onError()：在路由切换发生错误时触发。
下面是一个例子，展示了如何使用 router.beforeEach() 来控制路由访问权限：
// javascriptcn.com 代码示例
router.beforeEach((to, from, next) => {
// 判断用户是否登录
const isLogin = sessionStorage.getItem('token') === '123456'
if (to.path === '/login') {
// 如果用户已经登录，不能进入登录页面
if (isLogin) {
next({path: '/'})
} else {
next()
}
} else {
// 如果用户没有登录，不能进入其他页面
if (!isLogin) {
next({path: '/login'})
} else {
next()
}
}
})在上面的代码中，我们判断用户是否登录了。如果用户已经登录，并且试图进入登录页面，我们会将其重定向到首页。如果用户没有登录，并且试图进入其他页面，我们会将其重定向到登录页。
2. 动态路由
动态路由是一种根据参数动态生成路由的机制。Vue-Router 提供了动态路由的功能。
例如，我们可以在路由中定义一个动态参数，用来传递参数。下面是一个例子：
routes: [
{
path: '/users/:id',
name: 'user',
component: User
}
]上面的代码定义了一个动态路由，我们可以使用 /users/:id 来访问它。其中，:id 是一个动态参数。我们可以在组件中通过 this.$route.params.id 来获取到路由中的动态参数。
下面是一个例子，展示了如何从路由中获取动态参数：
// javascriptcn.com 代码示例
export default {
name: 'User',
data () {
return {
user: null
}
},
mounted () {
// 从路由中获取动态参数
const id = this.$route.params.id
// 根据 id 查询具体的用户信息
fetchUser(id).then(user => {
this.user = user
})
}
}在上面的例子中，我们在组件的 mounted 生命周期函数中，使用 this.$route.params.id 来获取动态参数。fetchUser() 函数根据传入的 id 参数来获取具体的用户信息。
3. 嵌套路由
嵌套路由是一种在组件内部定义子路由的机制。Vue-Router 提供了嵌套路由的功能。
下面是一个例子，展示了如何使用嵌套路由：
// javascriptcn.com 代码示例
routes: [
{
path: '/users',
name: 'users',
component: Users,
children: [
{
path: 'list',
name: 'users.list',
component: UserList
},
{
path: 'detail/:id',
name: 'users.detail',
component: UserDetails
}
]
}
]在上面的代码中，我们定义了一个嵌套路由。我们在 Users.vue 组件内部定义了两个子路由，分别是 /users/list 和 /users/detail/:id。
这样，我们就可以在 Users.vue 组件中通过 标记来渲染嵌套路由了。
完整示例代码
下面是一个完整的 Vue.js + Vue-Router 示例代码：
// javascriptcn.com 代码示例
import Vue from 'vue'
import VueRouter from 'vue-router'
import Hello from '@/components/Hello'
import About from '@/components/About'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Hello',
component: Hello
},
{
path: '/about',
name: 'About',
component: About
}
]
const router = new VueRouter({
mode: 'history',
routes
})
new Vue({
el: '#app',
render: h => h(App),
router
})总结
Vue-Router 是一个非常强大的插件，它使得在 Vue.js 中创建单页面应用变得更加简单和高效。
本文介绍了 Vue-Router 的基本用法和高级功能，包括路由映射、路由守卫、动态路由和嵌套路由等。
希望本文能够对你学习 Vue-Router 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653b1d7d7d4982a6eb56eebc