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>