vue路由

安装

安装 @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 这个路径，而没有匹配后面的参数 ）。