vue3动态添加路由

 更新时间:2022年06月20日 14:17:56   作者:小绵杨Yancy  
这篇文章主要介绍了vue3动态添加路由,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下

前言

有的时候我们需要根据不同的用户身份生成不同的路由规则,例如:

vip用户应该有自己的vip页面所对应的专用路由。

一、初始化项目

初始化vite + vue + ts项目,引入vue-router。
目录结构如下,注意这个404重定向,vue3不支持直接使用“*”匹配所有路由了,要使用:catchAll(.*)

初始化路由:

import {createRouter, createWebHashHistory} from "vue-router";
const  routes = [
    {
        path: "/",
        component: () => import("../views/HomePage.vue")
    },
    {
        path: "/404",
        component: () => import("../views/ErrorPage.vue")
    },
    {
        path: "/:catchAll(.*)", // 不识别的path自动匹配404
        redirect: '/404',
    },
]
const router=createRouter({
    history: createWebHashHistory(),
    routes
})
export default router;

现在如果去访问vip路由,则会跳转到404页面。

二、添加“vip”路由

如果需要访问vip页面,那么就需要我们动态地添加vip路由,下面代码实现了vip路由添加:

import {useRouter} from "vue-router";
let router = useRouter();
function addRouter(){
  router.addRoute(  {
    path: "/vip",
    component: () => import("../views/VipPage.vue")
  })
}

此时我们再去访问vip路由路径:

可以成功访问了。

三、总结

可以了解到,动态添加路由就是使用了router对象的addRoute方法。有时候可能是添加嵌套路由,也就是子路由。

router.addRoute({ name: 'admin', path: '/admin', component: Admin })
router.addRoute('admin', { path: 'settings', component: AdminSettings })

// 这等效于:
router.addRoute({
  name: 'admin',
  path: '/admin',
  component: Admin,
  children: [{ path: 'settings', component: AdminSettings }],
})

到此这篇关于vue3动态添加路由的文章就介绍到这了,更多相关vue动态路由内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue computed计算属性详细讲解

    Vue computed计算属性详细讲解

    computed是vue的配置选项,它的值是一个对象,其中可定义多个计算属性,每个计算属性就是一个函数,下面这篇文章主要给大家介绍了关于vue中计算属性computed的详细讲解,需要的朋友可以参考下
    2022-10-10
  • vue+element-ui+sortable.js实现表格拖拽功能

    vue+element-ui+sortable.js实现表格拖拽功能

    这篇文章主要为大家详细介绍了vue+element-ui+sortable.js实现表格拖拽功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • vue中各种通信传值方式总结

    vue中各种通信传值方式总结

    在本篇文章里小编给大家分享了关于vue中各种通信传值方式的相关知识点,有兴趣的朋友们学习下。
    2019-02-02
  • 详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南

    详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南

    这篇文章主要介绍了详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • 一文详解Vue-组件自定义事件(绑定和解绑)

    一文详解Vue-组件自定义事件(绑定和解绑)

    这篇文章主要介绍了Vue-组件自定义事件的绑定和解绑,文中有详细的图文实例,对学习或工作有一定的参考价值,需要的小伙伴可以阅读下
    2023-05-05
  • vue项目实现通过ip地址访问和localhost访问方式

    vue项目实现通过ip地址访问和localhost访问方式

    这篇文章主要介绍了vue项目实现通过ip地址访问和localhost访问方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • Vue 全家桶实现移动端酷狗音乐功能

    Vue 全家桶实现移动端酷狗音乐功能

    这篇文章主要介绍了Vue 全家桶实现移动端酷狗音乐功能,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-11-11
  • 详解Vue用cmd创建项目

    详解Vue用cmd创建项目

    在本篇内容里小编给大家整理了关于Vue用cmd创建项目的方法讲解,有兴趣的朋友们跟着学习下。
    2019-02-02
  • Vue使用vue-drag-resize生成悬浮拖拽小球

    Vue使用vue-drag-resize生成悬浮拖拽小球

    这篇文章主要为大家详细介绍了Vue使用vue-drag-resize生成悬浮拖拽小球,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • 对vue事件的延迟执行实例讲解

    对vue事件的延迟执行实例讲解

    今天小编就为大家分享一篇对vue事件的延迟执行实例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08

最新评论