vue3动态添加路由

目录
  • 前言
  • 一、初始化项目
  • 二、添加“vip”路由
  • 三、总结

前言

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

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动态路由内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue动态添加store、路由和国际化配置方式

    目录 vue动态添加store,路由和国际化 vue动态添加store vue动态添加路由 vue动态加载国际化 前端项目中用vue-i18n实现国际化 在项目中安装国际化包的依赖 配置文件 异步方式引入,一次只加载一种国际化包 非异步步方式,每次加载所有的包 使用 切语言 vue动态添加store,路由和国际化 vue动态添加store 想写组件库?用这个吧 … // store module标准格式 import demo from '@/store/modules/demo' $store

  • vue-admin-template 动态路由的实现示例

    vue-admin-template 动态路由的实现示例

    提供登录与获取用户信息数据接口 在api/user.js中 import request from '@/utils/request' const Api = { TakeOut: '/student/students/takeOut/', LoginIn: '/student/students/loginIn/', StudentInfo:'/student/students/studentInfo/', } export function login(parameter) { return

  • 如何利用Vue3管理系统实现动态路由和动态侧边菜单栏

    如何利用Vue3管理系统实现动态路由和动态侧边菜单栏

    目录 前言 动态路由 动态侧边菜单栏 总结 前言 在做Vue管理系统的时候,都会遇到的一个需求:每个用户的权限是不一样的,那么他可以访问的页面(路由),可以操作的菜单选项是不一样的,如果由后端控制,我们前端需要去实现动态路由,动态渲染侧边菜单栏. 动态路由 在本示例管理系统中,由于每个用户的权限不一样,拥有的可以访问的路由页面也不一样,用户能访问的路由页面都是后端根据权限动态配置的 我们前端需要根据后端接口返回的路由表去动态增删路由,从而生成这个用户所拥有的路由. 重点:实现动态路由api ro

  • vue实现动态路由详细

    目录 一.前端控制 1.在router.js文件(把静态路由和动态路由分别写在router.js) 2.store/permission.js(在vuex维护一个state,通过配角色来控制菜单显不显示) 3.src/permission.js 4.侧边栏的可以从vuex里面取数据来进行渲染 二.后端控制路由 1.store/permission.js,在vuex里面发送请求获取数据 2.整理一份数据结构,存到表里 3.写一个转化方法,把获取到的数据转换成router结构 主流的实现方式: 简单

  • vue项目keepAlive配合vuex动态设置路由缓存方式

    vue项目keepAlive配合vuex动态设置路由缓存方式

    目录 需求 效果图 解决方案 1.App.vue文件 2.main.js文件 3.store/modules/common.js文件 4.utils/utils.js文件 5.store/index.js文件 6.router/index.js文件 7.routers/Home.vue文件 需求 首页 → 列表页→ 详情页(缓存列表页面 ) → 列表页(不重新加载列表页)→ 首页(清除列表页的缓存) 效果图 解决方案 直接使用keepAlive会出现一个问题,当从查询1进入列表页面,这时缓存li

  • vue如何根据权限生成动态路由、导航栏

    vue如何根据权限生成动态路由、导航栏

    目录 基本思路 相关代码 基本思路 1.创建vueRouter,用公共路由实例化 2.创建需要根据权限筛选的路由对象(在路由对象,添加必要的权限判断字段) 3.登录完成,由后端配合返回当前用户的权限集合 4.筛选出有权限的路由对象,利用vueRouter的addRoutes方法,生成完整路由 5.处理刷新页面导致vueRouter重新实例化导致路由对象不完善 (利用router.beforeEach导航守卫,,利用addRoutes()完善 路由对象 ) 6.侧边导航栏相关代码 相关代码 根据上

  • vueRouter--matcher之动态增减路由方式

    目录 matcher之动态增减路由 解决办法 番外 vueRouter动态追加路由 具体路由拦截全在router.beforeEach里处理 curPath用于辅助处理 matcher之动态增减路由 优化项目时,有个环节在主路由下,根据后端返回不同内容,需要修改动态路由.如果直接删除原来路由,再addrouter新路由,发现原来的路由还是存在的.vue动态新增路由,没有删除功能(vue官方文档好像没有提供). 解决办法 使用matcher : const createRouter = () =>

  • vue后台管理如何配置动态路由菜单

    vue后台管理如何配置动态路由菜单

    目录 后台管理配置动态路由菜单 根据权限生成动态路由及导航菜单 后台管理配置动态路由菜单 前段时间做一个后台管理项目,因为超级管理员可以给普通管理员动态更改权限,所以vue-element-admin里的写死的权限路由菜单就不太适合我,自己研究了好半天,经历了各种死循环,终于差不多弄出了一个,可能会有点啰嗦,总结一下: 我这个后台分为三个角色:超级管理员.企业管理员和普通管理员.其中,超级管理员可以查看所有的路由菜单,企业管理员也是固定的几个菜单,所以,超级管理员和企业管理员是我在前端写好的路由

  • vue router 动态路由清除方式

    目录 router 动态路由清除 vue-router退出登录清空路由 router 动态路由清除 重置matcher可达到路由还原效果 在用户退出时调用 resetRouter(router) 即可还原路由 import Vue from 'vue' import Router from 'vue-router' import { constantRouterMap } from '...' //导入初始化router   // 传入当前router export function reset

  • vue3动态添加路由

    vue3动态添加路由

    目录 前言 一.初始化项目 二.添加“vip”路由 三.总结 前言 有的时候我们需要根据不同的用户身份生成不同的路由规则,例如: vip用户应该有自己的vip页面所对应的专用路由. 一.初始化项目 初始化vite + vue + ts项目,引入vue-router.目录结构如下,注意这个404重定向,vue3不支持直接使用“*”匹配所有路由了,要使用:catchAll(.*). 初始化路由: import {createRouter, createWebHashHistory} from "vu

  • Vue 动态添加路由及生成菜单的方法示例

    写后台管理系统,估计有不少人遇过这样的需求:根据后台数据动态添加路由和菜单. 为什么这么做呢?因为不同的用户有不同的权限,能访问的页面是不一样的. 在网上找了好多资料,终于想到了解决办法. 动态生成路由 利用 vue-router 的 addRoutes 方法可以动态添加路由. 先看一下官方介绍: router.addRoutes router.addRoutes(routes: Array<RouteConfig>) 动态添加更多的路由规则.参数必须是一个符合 routes 选项要求的数组.

  • vue 解决addRoutes动态添加路由后刷新失效问题

    vue 解决addRoutes动态添加路由后刷新失效问题

    前言 某些场景下我们需要利用addRoutes动态添加路由,但是刷新后就会失效,前段时间项目里刚好遇到了这个应用场景,所以就花时间研究了一下,做下分享跟记录,说的不对的地方,请大家指正. 应用场景:用户a登录进系统,页面上有个按钮,点击之后会动态添加路由并且跳转,跳转过去之后,用户刷新后也会停留在当前页面. 不点这个按钮,浏览器输入地址,用户会跳到404页面 github:https://github.com/Mrblackant/keepRouter/tree/master 思路 1.用户点击

  • vue实现权限控制路由(vue-router 动态添加路由)

    用户登录后返回权限菜单,前端根据权限菜单动态添加路由,然后再动态生成菜单栏. 思路如下: 一.定义初始化默认路由. 二.动态配置路由,这里是把所有组件中相应的路由配置成一个个的对象,根据后台返回的菜单tree一个个去匹配. 三.通过匹配,把匹配好的路由数据addRoutes到路由中. 四.为了防止刷新页面后路由数据被清空,这里用判断是否登录的方式,再次加载动态路由. 具体代码如下: router.js import Vue from 'vue' import {router} from './i

  • vue路由结构可设一层方便动态添加路由操作

    动态添加路由基本功能 let routes=[{ path: '/login', name: 'login', component: () => import('../components/Login.vue') }] this.$router.addRoutes(routes) 涉及多层路由嵌套 如图 单纯使用addRoutes 层级结构不同 修改路由结构 例: { name:'account', path: '/account/account', meta: { title: '个人中心',

  • 关于vue中根据用户权限动态添加路由的问题

    关于vue中根据用户权限动态添加路由的问题

    根据用户的权限,展示不同的菜单页. 知识点 路由守卫(使用了前置守卫):根据用户角色判断要添加的路由 vuex:保存动态添加的路由 难点 每次路由发生变化时都需要调用一次路由守卫,并且store中的数据会在每次刷新的时候清空,因此需要判断store中是否有添加的动态路由. (若没有判断 则会一直添加 导致内存溢出) 根据角色判断路由 过滤动态路由 判断每条路由角色是否与登录传入的角色一致 <template> <div> <el-menu :default-active=&q

  • vue动态添加路由addRoutes之不能将动态路由存入缓存的解决

    在我不知道vue的路由还可以通过addRoutes动态添加时,我只知道vue的路由都是写死在路由表中的,每当跳转时再去加载相应的路由.直到在一个新公司接到需要根据用户的权限显示不同的菜单的需求时才知道了原来vue-router还有一个addRoutes的API,立马研究了一下. router.addRoutes: 函数签名: router.addRoutes(routes: Array<RouteConfig>) 动态添加更多的路由规则.参数必须是一个符合routes选项要求的数组. 点这里去

  • vue 解决addRoutes多次添加路由重复的操作

    我就废话不多说了,大家还是直接看代码吧~ import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) const createRouter = () => new Router({ mode: 'history', routes: [] }) const router = createRouter() export function resetRouter () { const newRouter = createR

  • vue3动态路由刷新后空白或者404问题的解决

    目录 前言 实现 登出页面需要清除缓存 排错过程 总结 前言 之前用vue+ant-design-vue写了一个动态路由的页面,更新看一下不能用了555~~~ 之前用的组件版本不知道了,回退也不知道哪个版本合适,就是用"vue": "^3.2.13" , "vue-router": "^4.0.3","vuex": "^4.0.0",ant-design-vue": "

随机推荐