安装
安装 @vue/cli-plugin-router 插件
使用
注册路由
在 router 文件夹中的 index.js 中将路由添加到 routes 数组中例如：
const routes = [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/login',
name: 'login',
component: LoginView
},
{
path: '/register',
name: 'register',
component: RegisterView
},
{
path: '/404',
name: '404',
component: NotFoundView
},
]注意：有使用到的组件要import进index.js中
重定向示例：
{
path: '/:catchAll(.*)',
redirect: '/404/',
}:catchAll() 是关键字，括号里面接收正则表达式，这里的 . 表示任意字符， 表示任意多个 .* ，
redirect 表示重定向的链接。
使用参数的示例：
{
path: '/userprofile/:userId/',
name: 'userprofile',
component: UserProflieView
}这里 userId 是一个变量，在要当作变量的路由前面加上 : 即可。
在组件中使用路由参数，需要使用 useRoute 组件
示例：
import { useRoute } from 'vue-router';
export default {
name: 'UserProfileView',
components: {
ContentBase,
},
setup() {
const route = useRoute();
console.log(route.params.userId);
}对应的跳转：
<router-link class="nav-link" :to="{name: 'userprofile', params: {userId : 2,}}">用户动态</router-link>需要在params对象中添加对应的参数。
跳转
<router-link class="navbar-brand" :to="{name: 'home', params: {}}">Myspace</router-link>router-link 是vue中的一个组件，使用 : + 名称绑定属性，这里绑定一个to属性表示要跳转的组件，里面是一个对象，对象一个key是name，表示组件的名称
在函数中使用跳转示例：
import router from '@/router/index'
success() {
router.push({name: 'userlist'});
},使用 router 的 push api 里面传的参数是一个对象，和 router-link 中 :to 是一样的。
组件中路由的使用
使用 <router-view /> 表示这个标签通过链接的不同渲染不同的组件。
一般放在 App.vue 中， 例如：
<template>
<NavBar />
<router-view />
</template>这里 NavBar 一直保持不变， router-view 根据链接的不同渲染不同页面。
一般链接中可能会带有参数，例如 /userprofile/65 、 /userprofile/32 ，如果想要严格判断完整的路径可以给 router-view 加一个属性 :key="$route.fullPath"
例如：
<template>
<NavBar />
<router-view :key="$route.fullPath"/>
</template>如果不加的话，/userprofile/65 、 /userprofile/32 这两个页面可能显示一样的内容。（比如先访问 /userprofile/65 后访问 /userprofile/32 ，可能页面还是 /userprofile/65 的内容而不是 /userprofile/32 的内容，原因就是只匹配 userprofile 这个路径，而没有匹配后面的参数 ）。