基于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 相关文章推荐
JS中简单的实现像C#中using功能(有源码下载)
Jan 09 Javascript
flexigrid 类似ext grid的JS表格代码
Jul 17 Javascript
5个javascript的数字格式化函数分享
Dec 07 Javascript
使用UglifyJS合并/压缩JavaScript的方法
Mar 07 Javascript
js 手机号码合法性验证代码集合
Sep 29 Javascript
javascript记录文本框内文字个数检测文字个数变化
Oct 14 Javascript
Javascript基础教程之数据类型 (数值 Number)
Jan 18 Javascript
jQuery 利用$.ajax 时获取原生XMLHttpRequest 对象的方法
Aug 25 Javascript
vue2.0构建单页应用最佳实战
Apr 01 Javascript
js单页hash路由原理与应用实战详解
Aug 14 Javascript
bootstrap与pagehelper实现分页效果
Dec 29 Javascript
如何使JavaScript休眠或等待
Apr 27 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
用Socket发送电子邮件(利用需要验证的SMTP服务器)
2006/10/09 PHP
在mysql数据库原有字段后增加新内容
2009/11/26 PHP
编译php 5.2.14+fpm+memcached(具体操作详解)
2013/06/18 PHP
php生成excel文件的简单方法
2014/02/08 PHP
PHP单链表的实现代码
2016/07/05 PHP
PHP实现webshell扫描文件木马的方法
2017/07/31 PHP
PHP去除空数组且数组键名重置的讲解
2019/02/28 PHP
jquery异步循环获取功能实现代码
2010/09/19 Javascript
简介JavaScript中的setDate()方法的使用
2015/06/11 Javascript
使用控制台破解百小度一个月只准改一次名字
2015/08/13 Javascript
js如何实现淡入淡出效果
2020/11/18 Javascript
JavaScript简单实现鼠标移动切换图片的方法
2016/02/23 Javascript
js两种拼接字符串的简单方法(必看)
2016/09/02 Javascript
BootStrap table使用方法分析
2016/11/08 Javascript
原生js编写焦点图效果
2016/12/08 Javascript
jQuery插件zTree实现删除树节点的方法示例
2017/03/08 Javascript
vue-resourse将json数据输出实例
2017/03/08 Javascript
vue之数据交互实例代码
2017/06/16 Javascript
Vue入门之animate过渡动画效果
2018/04/08 Javascript
JS实现放烟花效果
2020/03/10 Javascript
Python脚本实现下载合并SAE日志
2015/02/10 Python
python中reload(module)的用法示例详解
2017/09/15 Python
Python实现的排列组合计算操作示例
2017/10/13 Python
基于python3 pyQt5 QtDesignner实现窗口化猜数字游戏功能
2019/07/15 Python
Python list运算操作代码实例解析
2020/01/20 Python
详解如何修改jupyter notebook的默认目录和默认浏览器
2021/01/24 Python
CSS3的一个简单导航栏实现
2015/08/03 HTML / CSS
法国票务网站:Ticketmaster法国
2018/07/09 全球购物
教师实习自我鉴定
2013/12/13 职场文书
“四风”问题的主要表现和危害思想汇报
2014/09/19 职场文书
2015年学校食堂工作总结
2015/04/22 职场文书
毕业设计致谢词
2015/05/14 职场文书
劳动争议仲裁代理词
2015/05/25 职场文书
2016年庆祝六一儿童节活动总结
2016/04/06 职场文书
MySQL提升大量数据查询效率的优化神器
2022/07/07 MySQL
源码安装apache脚本部署过程详解
2022/09/23 Servers