1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > vue3通过addRouter实现动态路由(添加为指定路由的子路由)

vue3通过addRouter实现动态路由(添加为指定路由的子路由)

时间:2022-12-30 16:36:38

相关推荐

vue3通过addRouter实现动态路由(添加为指定路由的子路由)

废话不多说,直接上代码!

let menu = store.state.menumenu.forEach((item: any) => {router.addRoute("home",{path: item.url,nama:item.name,component: () => import('@/views' + item.url + '.vue')})})

我这边是添加到名为home 的路由下,也就是home的子路由,所以加了"home"

Router. ts下

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'import HomeView from '../views/HomeView.vue'import store from '@/store/index'const routes: Array<RouteRecordRaw> = [{path: '/',name: 'home',component: HomeView,},]

如果是直接添加到路由里面的话,就可以省去这一步。 在Vue2当中是有addRouters这个方法的,这个方法可以直接把 Array 类型的数据添加进去,比较方便。但是在Vue3中省去了这个方法,只能逐个去添加。

这段代码可以在 Router.ts 文件中,亦可以在 Mine.ts 文件中存在,或者在登陆完成的时候也可以。

Store.ts

import { createStore } from 'vuex'export default createStore({state: {menu:[{url:'/one',name:'one'},{url:'/two',name:'two'},{url:'/three',name:'three'},{url:'/four',name:'four'},],},})

当然了,这只是一个简单地写法,在真正的发开过程中,我们可以使用 meta 路由信息表来进行配合,已达到需求。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。