vue3路由跳转方式详解(vue3router知识点和用法总结)

一、vue3路由配置：

默认配置文件（src/router/index.js）

path 路由路径，支持动态路由，动态路由参数名加冒号，例如 /user/profile/:uid

name 路由名称，跳转时可根据名称定位

component 加载的组件，支持直接加载和懒加载

直接加载，一般首页，默认页面采用直接加载，

懒加载，需要借助箭头函数，实现按需加载chunk js

redirect 路由跳转，一般包含子路由，跳转默认一个子路由

1.直接写跳转path。

2.通过对象方式，对象内定位指定路由

3.通过箭头函数

children 嵌套子路由数组列表

alias 路由别名，支持字符串单条和数组多条，可以通过简单别名访问

 {        path: '/user',        alias: '/u',        name: 'User',        component: () => import('../views/User'),        // redirect: '/user/setting',        redirect: {name: 'UserFollow'},        children: [            {                path: 'follow',                name: 'UserFollow',                component: () => import('../views/User/Follow')            },            {                path: 'profile/:uid',                alias: 'if/:uid',                name: 'UserProfile1',                // redirect: to => ({                //     name: 'UserProfile2',                //     query: {uid: to.params.uid}                // }),                redirect: to => {                    return {                        name: 'UserProfile2',                        query: {uid: to.params.uid}                    };                },                component: () => import('../views/User/Profile')            },            {                path: 'profile',                name: 'UserProfile2',                component: () => import('../views/User/Profile')            },        ]    },

二、vue3路由传参

通过动态路由传递：

例如：/good/13 (遵循restful api规范)

实现关键代码：

动态路由配置：

{          path: 'good/:id',    name: 'GoodInfo1',    component: () => import('../views/Good/Info')},

动态路由导航链接：

<li v-for="item in goods" :key="item.id">  <router-link :to="'/good/'+item.id">{{item.title}}</router-link></li>

模板接收动态路由参数：

{{$route.params.id}}

JS计算属性接收动态路由参数：

computed:{   pageid(){                  return this.$route.params.id;  },}

通过路由query参数传递

例如：/good?id=13&catid=1

路由配置：

{    path: 'good',    name: 'GoodInfo2',    component: () => import('../views/Good/Info')},

路由导航：

<li v-for="item in goods" :key="item.id">    <router-link :to="'/good/'+item.id">{{item.title}}</router-link></li>

模板接收query参数：

{{$route.query.id}}

 三、vue3导航守卫

导航守卫适用范围：

全局导航守卫

路由独享守卫

组件内守卫

导航守卫种类：

前置守卫（路由前置中间件）

// 以全局为例：前置守卫（请求之前拦截器）router.beforeEach((to) => {    // 判断token，登录，认证鉴权，路由鉴权跳转等});

后置钩子（路由后置中间件）

//以全局守卫 为例：router.afterEach(() => {      // 这里写一些，比如请求完，路由不存在的情况，报错处理});

四、vue3路由内置标签：

router-link 导航链接，可以通过button，a链接等替代。

router-view 导航组件对应视图

<router-link to="/about">关于我们</router-link><router-view />

五、vue3路由视图缓存

借助keep-alive 组件 实现 组件间 缓存。

注：vue3 写法 区别于 vue2

<router-view v-slot="{ Component }">  <transition>     <keep-alive>       <component :is="Component" />     </keep-alive>   </transition></router-view>