router vue 动态改变url

什么叫动态路由呢？顾名思义就是程序员眼中的硬编码与非硬编码的区别。

还是拿之前的静态路由来做对比

import Vue from 'vue'
import Router from 'vue-router'Vue.use(Router)const globalRoutes = [{path: '/test', component: () => import('pages/Test.vue')}
]const router = new Router({mode: 'hash',isAddDynamicMenuRoutes:false,scrollBehavior: () => ({y: 0}),routes: globalRoutes
})export default router

这是我们之前的写法。

现在我们需要将

const globalRoutes = [{path: '/test', component: () => import('pages/Test.vue')}
]

这段代码里路由动态化，从而实现动态路由加载的过程。

首先要实现这个目的，你的了解router的生命钩子。

我们这里实现这个目的只用到 beforeEach 这一个方法，下面我们来实现这一过程。感兴趣的老铁可以去看vuerouter官网的介绍。

首先我们模拟一个后台请求，创建nav.js

export const nav = [{label:'主页',url:'Index',icon:'home'},{label:'测试',url:'Test',icon:'all_inclusive'},
]

然后我们再router里面引入nav.js

import Vue from 'vue'
import Router from 'vue-router'
import {nav} from './nav'Vue.use(Router)const globalRoutes = [{path: '/test', component: () => import('pages/Test.vue')}
]const router = new Router({mode: 'hash',isAddDynamicMenuRoutes:false,scrollBehavior: () => ({y: 0}),routes: globalRoutes
})router.beforeEach((to, from, next) => {if (!router.isAddDynamicMenuRoutes) {let list = [];nav.forEach(item => {let url = '/'+item.url.replace('/', '-').toLowerCase();let urlName = item.url + '.vue';list.push({label:item.label,url:url,icon:item.icon});mainRoutes.children.push({path: url, component: () => import(`pages/${urlName}`)})});router.addRoutes([mainRoutes,])router.isAddDynamicMenuRoutes = true;sessionStorage.setItem('nav', JSON.stringify(list));next({ ...to, replace: true })}else {next()}
})export default router

这样就实现了路由动态的效果了。是不是很简单呢。

最后我将目录结构截图出来大家看下。

router vue 动态改变url_vue动态路由相关推荐

router vue 动态改变url_Vue教程(路由router-基本使用)
本文开始我们来给大家介绍在Vue中非常重要的一个内容,就是路由Router 什么是路由后端路由:对于普通的网站,所有的超链接都是URL地址,所有的URL地址都对应服务器上对应的资源: 前端路由:对于 ...
router vue 多个路径_vue-router 路由总结
vue.js 路由基础安装vue - router 直接下载 / CDN Unpkg.com 提供了基于 NPM 的 CDN 链接.上面的链接会一直指向在 NPM 发布的最新版本.你也可以像 htt ...
router vue 动态改变url_vue里router-link标签设置动态路由的3个方法
android 使用Tabhost 发生could not create tab content because could not find view with id 错误使用Tabhost的时候 ...
若依 vue前端动态设置路由path不同参数在页面容器里打开新页面（新路由），面包屑和标签页标题根据参数动态改变，面包屑多级标题，侧边栏对应菜单亮起
前言因为是在vue源码的基础上进行修改,所以,就没有复制代码在文章上,采取的是截图对比源码和我修改的代码片段.要麻烦你们自己手敲了. 先来看看效果: 场景:在费用配置列表中,点击每一项的配置,都会在 ...
vue实现动态改变title
vue实现动态改变title 想要实现vue动态改变页面title,需要给每个页面设置标题.并且在路由发生变化时修改页面title router - index.js const router = n ...
Vue实现角色权限动态路由详细教程，在vue-admin-template基础上修改，附免费完整项目代码
前言 vue-admin-template是一个最基础的后台管理模板,只包含了一个后台需要最基础的东西,如果clone的是它的master分支,是没有权限管理的,只有完整版vue-element-ad ...
uniapp、vue，vuex中state改变，getters不动态改变的完美解决方案！
uniapp.vue,vuex中state改变,getters不动态改变的完美解决方案! 参考文章: (1)uniapp.vue,vuex中state改变,getters不动态改变的完美解决方案! ( ...
Vue学习（动态组件、组件路由缓存keepalive）-学习笔记
文章目录 Vue学习(动态组件.组件路由缓存keepalive)-学习笔记动态组件组件路由缓存keepalive Vue学习(动态组件.组件路由缓存keepalive)-学习笔记动态组件 < ...
VUE中动态改变字体大小
VUE中动态改变字体大小父组件将自己的数据传递送给子组件展示,子组件监听click操作,emit发送出去,父组件监听通过emit发送的信息,改变控制字体大小的postFontSize,通过style ...

router vue 动态改变url_vue动态路由

router vue 动态改变url_vue动态路由相关推荐

最新文章

热门文章