vue.js默认路由不加载linkActiveClass问题的解决方法


Posted in Javascript onDecember 11, 2017

发现问题

最近在打开项目的时候,发现我的默认路由没加载上linkActiveClass,

vue.js默认路由不加载linkActiveClass问题的解决方法

网上一搜,发现很多同学也有这个问题,查了一些资料发现这是个重定向的问题,官网文档是这么写的
https://router.vuejs.org/zh-cn/essentials/redirect-and-alias.html

重定向

重定向也是通过 routes 配置来完成,下面例子是从 /a 重定向到 /b:

const router = new VueRouter({
routes: [
{ path: '/a', redirect: '/b' }
]
})

重定向的目标也可以是一个命名的路由:

const router = new VueRouter({
routes: [
{ path: '/a', redirect: { name: 'foo' }}
]
})

甚至是一个方法,动态返回重定向目标:

const router = new VueRouter({
routes: [
{ path: '/a', redirect: to => {
// 方法接收 目标路由 作为参数
// return 重定向的 字符串路径/路径对象
}}
]
})

我的代码本来是这样的:

const router=new VueRouter({
linkActiveClass:'list-active',
routes:[
{
 path:'/',
 component:user
},
{
 path:'/user',
 component:user
},
{
 path:'/warship', 
 component:warship
}
]
})

这样虽然加载了子路由,但是它的默认类没跟着过来,然后加了一句redirect:'/user',修改成了这样

修改后:

const router=new VueRouter({
linkActiveClass:'list-active',
routes:[
{
 path:'/',
 redirect:'/user',
 component:user
},
{
 path:'/user',
 component:user
},
{
 path:'/warship', 
 component:warship
}
]
})

就完美解决了默认路由class没加载的问题。

这个重定向简单来说就是自定义路由指针,就跟js里面修改了引用地址一个道理,虽然表面上看着是个根目录,其实引用的是别的路由界面。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
javascript 表单规则集合对象
Jul 21 Javascript
Javascript 继承机制的实现
Aug 12 Javascript
在IE浏览器中resize事件执行多次的解决方法
Jul 12 Javascript
TextArea不支持maxlength的解决办法(jquery)
Sep 13 Javascript
DIV外区域Click后关闭DIV的实现代码
Dec 21 Javascript
JavaScript中的值是按值传递还是按引用传递问题探讨
Jan 30 Javascript
最佳的JavaScript错误处理实践
Jul 16 Javascript
浅析script标签中的defer与async属性
Nov 30 Javascript
利用nginx + node在阿里云部署https的步骤详解
Dec 19 Javascript
如何解决webpack-dev-server代理常切换问题
Jan 09 Javascript
js实现坦克移动小游戏
Oct 28 Javascript
JavaScript十大取整方法实例教程
Dec 03 Javascript
基于JavaScript 性能优化技巧心得(分享)
Dec 11 #Javascript
JavaScript时间戳与时间日期间相互转换
Dec 11 #Javascript
vue项目优化之通过keep-alive数据缓存的方法
Dec 11 #Javascript
微信小程序使用input组件实现密码框功能【附源码下载】
Dec 11 #Javascript
浅谈vue项目优化之页面的按需加载(vue+webpack)
Dec 11 #Javascript
微信小程序使用radio显示单选项功能【附源码下载】
Dec 11 #Javascript
详解webpack编译多页面vue项目的配置问题
Dec 11 #Javascript
You might like
php事务回滚简单实现方法示例
2017/03/28 PHP
利用php操作memcache缓存的基础方法示例
2017/08/02 PHP
js获取提交的字符串的字节数
2009/02/09 Javascript
javascript 面向对象编程 万物皆对象
2009/09/17 Javascript
js 阻止子元素响应父元素的onmouseout事件具体实现
2013/12/23 Javascript
基于jQuery实现返回顶部实例代码
2016/01/01 Javascript
jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析
2016/06/08 Javascript
vue.js入门教程之计算属性
2016/09/01 Javascript
Javascript实现页面滚动时导航智能定位
2017/05/06 Javascript
JavaScript实现短信倒计时60s
2017/10/09 Javascript
浅谈Vue Element中Select下拉框选取值的问题
2018/03/01 Javascript
vue基于mint-ui实现城市选择三级联动
2020/06/30 Javascript
微信小程序学习笔记之本地数据缓存功能详解
2019/03/29 Javascript
详解小程序设置缓存并且不覆盖原有数据
2019/04/15 Javascript
ES6基础之数组和对象的拓展实例详解
2019/08/22 Javascript
详解node.js 事件循环
2020/07/22 Javascript
[48:23]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#1COL VS EG第一局
2016/03/05 DOTA
[52:32]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第三场 11.18
2020/11/18 DOTA
python实现图片批量剪切示例
2014/03/25 Python
Python实现统计英文单词个数及字符串分割代码
2015/05/28 Python
快速了解Python相对导入
2018/01/12 Python
关于Python字符串显示u...的解决方式
2020/03/06 Python
浅析CSS3中鲜为人知的属性:-webkit-tap-highlight-color
2017/01/12 HTML / CSS
HTML5 Web Workers之网站也能多线程的实现
2013/04/24 HTML / CSS
html5 viewport使用方法示例详解
2013/12/02 HTML / CSS
卡塔尔航空官方网站:Qatar Airways
2017/02/08 全球购物
英国曼彻斯特宠物用品品牌:Bunty Pet Products
2019/07/27 全球购物
德国家具购物网站:Möbel Höffner
2019/08/26 全球购物
What is the purpose of Void class? Void类的作用是什么?
2016/10/31 面试题
银行个人求职自荐信范文
2013/12/16 职场文书
地球一小时倡议书
2014/04/15 职场文书
年检委托书
2014/08/30 职场文书
2015年初三班主任工作总结
2015/05/21 职场文书
国王的演讲观后感
2015/06/03 职场文书
2016开学第一课心得体会
2016/01/23 职场文书
2020年基层司法所建设情况调研报告
2019/11/30 职场文书