基于vue-router 多级路由redirect 重定向的问题


Posted in Javascript onSeptember 03, 2018

在做多级路由的时候遇到很多问题,虽然不难,但是如果没有经验,往往要花一整天时间才能解决(可能我笨),况且网上资料也很少。

项目需要是这样的:

登录页面跳到后台页面重定向,登录页是一级路由

基于vue-router 多级路由redirect 重定向的问题

对应页面

基于vue-router 多级路由redirect 重定向的问题

登录后:

基于vue-router 多级路由redirect 重定向的问题

同时重定向二级和三级页面,

基于vue-router 多级路由redirect 重定向的问题

这样登录就会重定向了,此时url

基于vue-router 多级路由redirect 重定向的问题

但又有一个问题:当再次点击底部“堂食”的时候,

基于vue-router 多级路由redirect 重定向的问题

url变成这样,并且三级页面没有出来

基于vue-router 多级路由redirect 重定向的问题

解决办法是:在这个“堂食”按键 添加一个方法

基于vue-router 多级路由redirect 重定向的问题

记住,也只有这样传参才有效

如果在<router-link>传参,问题多多:如linkActiveClass有问题,再次点击“堂食”,没有传参,三级页面不出现等等

基于vue-router 多级路由redirect 重定向的问题

以上这篇基于vue-router 多级路由redirect 重定向的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
html读出文本文件内容
Jan 22 Javascript
IE中radio 或checkbox的checked属性初始状态下不能选中显示问题
Jul 25 Javascript
extjs中form与grid交互数据(record)的方法
Aug 29 Javascript
js判断undefined类型示例代码
Feb 10 Javascript
jquery中change()用法实例分析
Feb 06 Javascript
js实现头像图片切割缩放及无刷新上传图片的方法
Jul 17 Javascript
实例详解AngularJS实现无限级联动菜单
Jan 15 Javascript
AngularJs 指令详解及示例代码
Sep 01 Javascript
一步步教会你微信小程序的登录鉴权
Apr 09 Javascript
详解微信小程序中组件通讯
Oct 30 Javascript
使用Promise封装小程序wx.request的实现方法
Nov 13 Javascript
vue 中url 链接左边的小图标更改问题
Dec 30 Javascript
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 #jQuery
Vue-router的使用和出现空白页,路由对象属性详解
Sep 03 #Javascript
Vue 通过自定义指令回顾v-内置指令(小结)
Sep 03 #Javascript
JavaScript日期工具类DateUtils定义与用法示例
Sep 03 #Javascript
Angular5中状态管理的实现
Sep 03 #Javascript
JavaScript创建对象方法实例小结
Sep 03 #Javascript
vue自定义底部导航栏Tabbar的实现代码
Sep 03 #Javascript
You might like
解析func_num_args与func_get_args函数的使用
2013/06/24 PHP
实例讲解PHP面向对象之多态
2014/08/20 PHP
PHP中ID设置自增后不连续的原因分析及解决办法
2016/08/21 PHP
php写app接口并返回json数据的实例(分享)
2017/05/20 PHP
jQuery一步一步实现跨浏览器的可编辑表格,支持IE、Firefox、Safari、Chrome、Opera
2009/08/28 Javascript
JavaScript和JQuery实用代码片段(一)
2010/04/07 Javascript
关于javascript中的typeof和instanceof介绍
2012/12/04 Javascript
判断浏览器的内核及版本号方法汇总
2015/01/05 Javascript
jQuery使用attr()方法同时设置多个属性值用法实例
2015/03/26 Javascript
深入浅析JavaScript中prototype和proto的关系
2015/11/15 Javascript
jquery实现一个简单的表单验证实例
2016/03/30 Javascript
jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例
2017/01/30 Javascript
Node.js使用orm2进行update操作时关联字段无法修改的解决方法
2017/06/13 Javascript
微信JS SDK接入的几点注意事项(必看篇)
2017/06/23 Javascript
JavaScript之实现一个简单的Vue示例
2019/01/17 Javascript
Vue中登录验证成功后保存token,并每次请求携带并验证token操作
2020/09/08 Javascript
Vue+Vant 图片上传加显示的案例
2020/11/03 Javascript
Vue + ts实现轮播插件的示例
2020/11/10 Javascript
Vue+scss白天和夜间模式切换功能的实现方法
2021/01/05 Vue.js
[01:08:48]LGD vs OG 2018国际邀请赛淘汰赛BO3 第三场 8.25
2018/08/29 DOTA
零基础写python爬虫之使用urllib2组件抓取网页内容
2014/11/04 Python
python多维数组切片方法
2018/04/13 Python
Python中的单行、多行、中文注释方法
2018/07/19 Python
python实现对指定字符串补足固定长度倍数截断输出的方法
2018/11/15 Python
pytorch获取vgg16-feature层输出的例子
2019/08/20 Python
python-numpy-指数分布实例详解
2019/12/07 Python
python logging通过json文件配置的步骤
2020/04/27 Python
Bally澳大利亚官网:瑞士奢侈品牌
2018/11/01 全球购物
高三自我鉴定
2013/10/23 职场文书
大学第二课堂活动总结
2014/07/08 职场文书
机电一体化应届生求职信
2014/08/09 职场文书
大学新生军训自我鉴定
2014/09/18 职场文书
2015年大学生入党自荐书
2015/03/24 职场文书
2015年管理人员工作总结
2015/05/13 职场文书
门面租赁合同范文
2019/08/06 职场文书
详解Python函数print用法
2021/06/18 Python