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中的缓动效果实现程序
Dec 29 Javascript
JS代码判断IE6,IE7,IE8,IE9的函数代码
Aug 02 Javascript
JS 数字转换研究总结
Dec 26 Javascript
禁用JavaScript控制台调试的方法
Mar 07 Javascript
初识SmartJS - AOP三剑客
Jun 08 Javascript
使用focus方法让光标默认停留在INPUT框
Jul 29 Javascript
如何理解jQuery中的ajaxSubmit方法
Mar 13 Javascript
iscroll实现下拉刷新功能
Jul 18 Javascript
angularjs 动态从后台获取下拉框的值方法
Aug 13 Javascript
jquery分页插件pagination使用教程
Oct 23 jQuery
Jquery实现无缝向上循环滚动列表的特效
Feb 13 jQuery
JavaScript实现九宫格拖拽效果
Jun 28 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中对用户身份认证实现两种方法
2011/06/04 PHP
使用php+Ajax实现唯一校验实现代码[简单应用]
2011/11/29 PHP
如何获知PHP程序占用多少内存(memory_get_usage)
2012/09/23 PHP
解析获取优酷视频真实下载地址的PHP源代码
2013/06/26 PHP
php获取发送给用户的header信息的方法
2015/03/16 PHP
PHP简单实现二维数组赋值与遍历功能示例
2017/10/19 PHP
PHP获取文件扩展名的常用方法小结【五种方式】
2018/04/27 PHP
thinkPHP5框架实现基于ajax的分页功能示例
2018/06/12 PHP
PHP基于进程控制函数实现多线程
2020/12/09 PHP
extjs 列表框(multiselect)的动态添加列表项的方法
2009/07/31 Javascript
javascript事件问题
2009/09/05 Javascript
jquery 插件学习(一)
2012/08/06 Javascript
自己实现string的substring方法 人民币小写转大写,数字反转,正则优化
2012/09/02 Javascript
js解析与序列化json数据(一)json.stringify()的基本用法
2013/02/01 Javascript
JS实现QQ图片一闪一闪的效果小例子
2013/07/31 Javascript
图片上传插件jquery.uploadify详解
2013/11/15 Javascript
javascript如何判断输入的url是否正确
2014/04/11 Javascript
使用javascript实现json数据以csv格式下载
2015/01/09 Javascript
全面解析Javascript无限添加QQ好友原理
2016/06/15 Javascript
完美解决jQuery符号$与其他javascript 库、框架冲突的问题
2016/08/09 Javascript
Javascript DOM事件操作小结(监听鼠标点击、释放,悬停、离开等)
2017/01/20 Javascript
微信小程序之滚动视图容器的实现方法
2017/09/26 Javascript
微信小程序+云开发实现欢迎登录注册
2019/05/24 Javascript
django js 实现表格动态标序号的实例代码
2019/07/12 Javascript
JavaScript代码简化技巧实例解析
2020/09/09 Javascript
Python实现的彩票机选器实例
2015/06/17 Python
Python金融数据可视化汇总
2017/11/17 Python
python实现发送邮件功能代码
2017/12/14 Python
Python with语句上下文管理器两种实现方法分析
2018/02/09 Python
PyQt编程之如何在屏幕中央显示窗体的实例
2019/06/18 Python
解决Django一个表单对应多个按钮的问题
2019/07/18 Python
python3.6 tkinter实现屏保小程序
2019/07/30 Python
Python 利用邮件系统完成远程控制电脑的实现(关机、重启等)
2019/11/19 Python
Python FtpLib模块应用操作详解
2019/12/12 Python
入股协议书
2014/04/14 职场文书
校庆团日活动总结
2014/08/28 职场文书