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 resetRouter (router) { const createRouter = () => new Router({ mode: 'history' routes: constantRouterMap }) // 用初始化的matcher替换当前router的matcher router.matcher = createRouter.matcher }
附matcher分析:https://www.jb51.net/article/244590.htm
vue-router退出登录清空路由
router没有提供清空数据的方法。我们可以这样写
this.$router.replace({path: '/login'}); location.reload();
以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
vue路由跳转router-link清除历史记录的三种方式(总结)
目录 路由跳转router-link清除历史记录 官方文档提供了如下三种方式 vue跳转后不记录历史记录 路由跳转router-link清除历史记录 1.在vue项目中说起路由跳转,我们最先想到的就是router-link标签以及this.$router.push函数. router-link和this.\$router.push的实现原理是一样的,在点击router-link时,内部调用的就是this.$router.push. 2.this.\$router.push这个方法会向 histo
-
关于vue路由缓存清除在main.js中的设置
1.main.js /* 页面数据缓存 */ var _CACHE_OBJS = {}; function _init_cache(comp, key, cache) { var obj = cache[key]; if (obj !== undefined) { comp[key] = obj; } var deep = typeof comp[key] === 'object'; comp.$watch(key, function (val) { //console.log("page &q
-
Vue Router 实现动态路由和常见问题及解决方法
个人理解:动态路由不同于常见的静态路由,可以根据不同的「因素」而改变站点路由列表.常见的动态路由大都是用来实现:多用户权限系统不同用户展示不同导航菜单. 如何利用Vue Router 实现动态路由 Vue项目实现动态路由的方式大体可分为两种: 前端将全部路由规定好,登录时根据用户角色权限来动态展示路由: 路由存储在数据库中,前端通过接口获取当前用户对应路由列表并进行渲染: 第一种方式在很多Vue UI 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
-
vue router动态路由下让每个子路由都是独立组件的解决方案
vue-router 之动态路由 vue-router官网上面是这样说的 // 带查询参数,变成 /register?plan=private router.push({ path: 'register', query: { plan: 'private' }}) 然后,我就这样写了: this.$router.push({path:'manage', query: {id: 'tasklist'}})1 结果很明显,失败了.然后我就默默的再次看了一下官网,结果发现了这句话 // 命名的路由 r
-
vue router动态路由设置参数可选问题
在日常工作中,我们需要将匹配到的所有路由,映射到一个组件上. 如下代码想要达到的效果: 不传page和id,则映射到user默认list页面 传page和id,根据page不同,显示不同的页面 问题 使用以下代码片段是不能实现以上效果的,因为默认情况下page和id参数是必传的,如果不传参数,则会根据默认路由跳转到home页面 new Router({ routes: [ { path: '/user/:page/:id', name: 'User', component: () => impo
-
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实现动态路由导航的示例
目录 1.导航守卫 二.功能展示 三.原理 四.功能实现 小结 1.导航守卫 “导航” 表示路由正在发生改变 正如其名,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航.有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的. 记住参数或查询的改变并不会触发进入/离开的导航守卫.你可以通过观察 $route 对象来应对这些变化,或使用 beforeRouteUpdate 的组件内守卫. v-router官网:https://router.vuejs.org
-
关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法
#在切换路由时,组件会被复用,不过,这也意味着组件的生命周期钩子不会再被调用. 解决办法有两种,1简单地 watch (监测变化) $route 对象: const User = { template: '...', watch: { '$route' (to, from) { // 对路由变化作出响应... } } } 2.使用 2.2 中引入的 beforeRouteUpdate 导航守卫: const User = { template: '...', beforeRouteUpdate
-
vue 实现动态路由的方法
很多时候我们在项目的路由都是在前端配置好的 但是有的时候为了进行全面的权限控制,会需要后台给出路由表,前端再渲染.不用在前端配置. 下面主要讲一下思路 1.和后台小哥哥沟通好数据,把我们前端配置的路由表数据给他,他就能看懂了 2.拿到数据需要我们自己再处理 路由中的component后台是给不了的,这里我们只需要后台小哥哥按照我们提供的前端component路径给数据,我们循环加载就可以了 //view就是后台给的数据 return () => import(`@/view/modules/${
-
手把手教你vue实现动态路由
目录 1.什么是动态路由? 2.动态路由的好处 3.动态路由如何实现 总结 1.什么是动态路由? 动态路由,动态即不是写死的,是可变的.我们可以根据自己不同的需求加载不同的路由,做到不同的实现及页面的渲染.动态的路由存储可分为两种,一种是将路由存储到前端.另一种则是将路由存储到数据库.动态路由的使用一般结合角色权限控制一起使用. 总结: 1)路由可变,不是写死的,动态加载 2)存储分两种:存前端,存数据库 2.动态路由的好处 使用动态路由可以跟灵活,无需手工维护,我们可以使用一个页面对路由进行维
-
vue router 通过路由来实现切换头部标题功能
在做单页面应用程序时,一般页面布局头尾两块都是固定在布局页面,中间为是路由入口.这时访问页面时头部标题不会变,该问题的解决方案如下: 通过采用组件内路由卫士(beforeRouterEnter.beforeRouterUpdate)与路由元信息(meta) 来实现更新头部标题信息.点击查看文档 beforeRouterEnter:第一次进入时调用. beforeRouterUpdate:重复使用当前组件时调用. 效果图如下: 注意看页面标题与图标变换 路由元信息(meta)配置 在路由元信息中
-
vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
解决vue-router嵌套路由(子路由)在history模式下刷新无法渲染页面的问题,具体内容如下 一. 异常描述 本来使用的是vue-router的hash模式,但是hash模式下url需要带"#"符号,不仅看起来不舒服,而且有些场景下是会破坏路由中的"#"(微信分享页面就会把"#"后边的内容处理掉),所以就需要使用history模式,然后就让后端改下nginx配置: location / { try_files $uri $uri/ /in
随机推荐
- Linux 中的Setfacl命令
- Javascript学习笔记5 类和对象
- 纯脚本备份_还原驱动增强版附相关sleep.exe
- Python 出现错误TypeError: ‘NoneType’ object is not iterable解决办法
- java中实体类转Json的2种方法
- C#实现终止正在执行的线程
- ToolTip 通过Js实现代替超链接中的title效果
- Php Cookie的一个使用注意点
- php中simplexml_load_string使用实例分享
- Python实现提取谷歌音乐搜索结果的方法
- 关于Asp代码与页面的分离模板技术第1/3页
- Linux和Windows中tomcat修改内存大小的方法
- Delphi中判断文件是否为文本文件的函数
- Shell脚本if else语句小结
- 清空mysql 查询缓存的可行方法
- linux中如何查看Raid磁盘阵列信息
- Java 调整格式日志输出
- js实现向右横向滑出的二级菜单效果
- C#中if语句使用概述
- 使用vue实现简单键盘的示例(支持移动端和pc端)