Vue router是一个用于Vue.js的官方路由管理器。它可以让你创建基于组件的单页面应用，实现不同的URL对应不同的视图。在本文中，我将介绍vue router的基本用法和一些高级特性。

首先，你需要安装vue router并在你的项目中引入它。你可以使用npm或yarn来安装：

npm install vue-router
# 或者
yarn add vue-router

然后，你需要在你的main.js文件中导入vue router并使用它：

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'


Vue.use(VueRouter)


// 创建一个路由对象
const router = new VueRouter({
// 定义路由规则
routes: [
// 每个路由规则是一个对象，包含path和component两个属性
{
path: '/', // URL路径
component: Home // 对应的组件
},
{
path: '/about',
component: About
},
{
path: '/contact',
component: Contact
}
]
})


// 创建一个Vue实例，并挂载到#app元素上
new Vue({
el: '#app',
router, // 将路由对象注入到Vue实例中
render: h => h(App)
})

这样，你就创建了一个基本的vue router应用。当你访问不同的URL时，你会看到不同的组件渲染在页面上。例如，当你访问/about时，你会看到About组件。

但是，这还不够。你可能还想要实现一些更复杂的功能，比如嵌套路由、动态路由、导航守卫、路由元信息等。下面，我将简单介绍这些特性，并给出一些示例代码。

嵌套路由是指在一个路由下面再定义子路由，以实现多级导航的效果。例如，假设你有一个User组件，它有两个子组件：Profile和Posts。你想要在User组件下面显示这两个子组件，并且可以通过/user/profile和/user/posts来访问它们。那么，你可以这样定义嵌套路由：

// 在routes数组中添加一个嵌套路由规则
{
path: '/user',
component: User,
// 在children属性中定义子路由规则
children: [
{
path: 'profile', // 注意这里不需要加斜杠
component: Profile
},
{
path: 'posts',
component: Posts
}
]
}

然后，在User组件中，你需要使用标签来渲染子组件：

<template>
<div class="user">
<h1>User</h1>
<!-- 这里会根据子路由规则渲染对应的组件 -->
<router-view></router-view>
</div>
</template>

动态路由是指在路由路径中使用参数来匹配不同的值，以实现动态的视图切换。例如，假设你有一个Post组件，它可以显示不同的文章内容。你想要通过/post/:id来访问不同的文章，其中:id是一个参数。那么，你可以这样定义动态路由：

// 在routes数组中添加一个动态路由规则
{
path: '/post/:id', // 使用冒号来表示参数
component: Post
}

然后，在Post组件中，你可以使用this.$route.params.id来获取参数的值，并根据它来显示不同的内容：

<template>
<div class="post">
<h1>Post {{ $route.params.id }}</h1>
<!-- 这里可以根据参数的值来显示不同的内容 -->
<p>{{ content }}</p>
</div>
</template>

导航守卫是一些函数，它们可以在路由跳转前后执行一些逻辑，比如验证用户身份、修改页面标题、取消未完成的请求等。vue router提供了全局、单个路由和组件内的三种导航守卫。下面，我将以全局导航守卫为例，介绍它们的用法。

全局导航守卫是指在每次路由跳转前后都会执行的函数。你可以在创建路由对象时，使用beforeEach和afterEach方法来注册全局导航守卫：

// 创建一个路由对象
const router = new VueRouter({
// 省略其他代码
})


// 注册一个全局前置守卫
router.beforeEach((to, from, next) => {
// to: 即将要进入的目标路由对象
// from: 当前导航正要离开的路由对象
// next: 一个函数，必须调用它来解析钩子
// 这里可以执行一些逻辑，比如验证用户身份
if (to.meta.requiresAuth) {
// 如果目标路由需要验证身份
if (isAuthenticated()) {
// 如果已经登录，放行
next()
} else {
// 如果未登录，跳转到登录页面
next('/login')
}
} else {
// 如果目标路由不需要验证身份，放行
next()
}
})


// 注册一个全局后置钩子
router.afterEach((to, from) => {
// to: 即将要进入的目标路由对象
// from: 当前导航正要离开的路由对象
// 这里可以执行一些逻辑，比如修改页面标题
document.title = to.meta.title || 'Vue Router'
})

路由元信息是指在路由规则中定义的一些自定义数据，它们可以用来存储一些与路由相关的信息，比如页面标题、是否需要验证身份等。你可以在每个路由规则中使用meta属性来定义路由元信息：

// 在routes数组中添加一个带有元信息的路由规则
{
path: '/login',
component: Login,
// 在meta属性中定义元信息
meta: {
title: 'Login',
requiresAuth: false
}
}

然后，在导航守卫或组件中，你可以使用to.meta或this.$route.meta来访问元信息：

// 在全局前置守卫中访问元信息
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth) {
// ...
}
})


// 在组件中访问元信息
export default {
mounted() {
console.log(this.$route.meta.title)
}
}

以上就是我对vue router的简单介绍。

前端开发相关课程推荐：前端开发相关课程