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实例教程(19) 使用HoTMetal(6)
Dec 23 Javascript
JS对外部文件的加载及对IFRMAME的加载的实现,当加载完成后,指定指向方法(方法回调)
Jul 04 Javascript
YUI模块开发原理详解
Nov 18 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
Mar 08 Javascript
JS实现的颜色实时渐变效果完整实例
Mar 25 Javascript
JS组件Bootstrap实现下拉菜单效果代码
Apr 26 Javascript
详解AngularJS如何实现跨域请求
Aug 22 Javascript
使用jquery给指定的table动态添加一行、删除一行
Oct 13 Javascript
vue2 中如何实现动态表单增删改查实例
Jun 09 Javascript
用vuex写了一个购物车H5页面的示例代码
Dec 04 Javascript
JS实现换肤功能的方法实例详解
Jan 30 Javascript
layui switch 开关监听 弹出确定状态转换的例子
Sep 21 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 获取百度的热词数据的代码
2012/02/18 PHP
PHP连接MongoDB示例代码
2012/09/06 PHP
PHP实现全角字符转为半角方法汇总
2015/07/09 PHP
PHP编写登录验证码功能 附调用方法
2016/05/19 PHP
yii通过小物件生成view的方法
2016/10/08 PHP
PHP策略模式定义与用法示例
2017/07/27 PHP
如何在Mozilla Gecko 用Javascript加载XSL
2007/01/09 Javascript
javascript操作文本框readOnly
2007/05/15 Javascript
Javascript注入技巧
2007/06/22 Javascript
另一个javascript小测验(代码集合)
2011/07/27 Javascript
js 获取浏览器版本以此来调整CSS的样式
2014/06/03 Javascript
javascript关于open.window子页面执行完成后刷新父页面的问题分析
2015/04/27 Javascript
js+CSS实现模拟华丽的select控件下拉菜单效果
2015/09/01 Javascript
使用Promise解决多层异步调用的简单学习心得
2016/05/17 Javascript
纯js仿淘宝京东商品放大镜功能
2017/03/02 Javascript
Vue header组件开发详解
2018/01/26 Javascript
[03:02]辉夜杯主赛事第二日 每日之星
2015/12/27 DOTA
Python数据结构之Array用法实例
2014/10/09 Python
python遍历文件夹,指定遍历深度与忽略目录的方法
2018/07/11 Python
pytorch 多分类问题,计算百分比操作
2020/07/09 Python
移动端rem布局的两种实现方法
2018/01/03 HTML / CSS
详解CSS3的perspective属性设置3D变换距离的方法
2016/05/23 HTML / CSS
GUESS盖尔斯法国官网:美国时尚品牌
2016/09/23 全球购物
iKRIX意大利网上商店:男女豪华服装和配件
2019/10/09 全球购物
周鸿祎:教你写创业计划书
2013/12/30 职场文书
给女朋友的道歉信
2014/01/10 职场文书
青年教师培训方案
2014/02/06 职场文书
党员违纪检讨书
2014/02/18 职场文书
行政内勤岗位职责
2014/04/07 职场文书
精彩的演讲稿开头
2014/05/08 职场文书
授权委托书样本及填写说明
2014/09/19 职场文书
JavaScript原始值与包装对象的详细介绍
2021/05/11 Javascript
使用这 6个Vue加载动画库来减少我们网站的跳出率
2021/05/18 Vue.js
SpringBoot读取Resource下文件的4种方法
2021/07/02 Java/Android
Golang 链表的学习和使用
2022/04/19 Golang
基于docker安装zabbix的详细教程
2022/06/05 Servers