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

 分类:vue教程时间:2022-10-21 07:30:01点击:

vue3路由跳转方式详解

一、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>


除注明外的文章,均为来源:老汤博客,转载请保留本文地址!
原文地址: