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 相关文章推荐
jQuery.Validate验证库的使用介绍
Apr 26 Javascript
JS实现网页右侧带动画效果的伸缩窗口代码
Oct 29 Javascript
深入学习jQuery Validate表单验证(二)
Jan 18 Javascript
JavaScript学习笔记之数组随机排序
Mar 23 Javascript
30分钟快速掌握Bootstrap框架
May 24 Javascript
js中 计算两个日期间的工作日的简单实例
Aug 08 Javascript
bootstrap提示标签、提示框实现代码
Dec 28 Javascript
详解Angular4中路由Router类的跳转navigate
Jun 09 Javascript
angular2中Http请求原理与用法详解
Jan 11 Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
Mar 08 Javascript
vue 导出文件,携带请求头token操作
Sep 10 Javascript
利用PHP实现递归删除链表元素的方法示例
Oct 23 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 获取可变函数参数的函数
2009/08/26 PHP
php短域名转换为实际域名函数
2011/01/17 PHP
PHP性能优化 产生高度优化代码
2011/07/22 PHP
php实现快速排序的三种方法分享
2014/03/12 PHP
Yii框架扩展CGridView增加导出CSV功能的方法
2017/05/24 PHP
php类自动装载、链式操作、魔术方法实现代码
2017/07/23 PHP
JavaScript入门教程(3) js面向对象
2009/01/31 Javascript
JS的Document属性和方法小结
2013/09/17 Javascript
JavaScript代码编写中各种各样的坑和填坑方法
2014/06/06 Javascript
深入理解JavaScript中的箭头函数
2015/07/28 Javascript
JS 实现倒计时数字时钟效果【附实例代码】
2016/03/30 Javascript
DropDownList实现可输入可选择(两种版本可选)
2016/12/07 Javascript
JavaScript调试的多个必备小Tips
2017/01/15 Javascript
Bootstrap table学习笔记(2) 前后端分页模糊查询
2017/05/18 Javascript
利用JS制作万年历的方法
2017/08/16 Javascript
jQuery Layer弹出层传值到父页面的实现代码
2017/08/17 jQuery
简单实现vue验证码60秒倒计时功能
2017/10/11 Javascript
微信小程序使用audio组件播放音乐功能示例【附源码下载】
2017/12/08 Javascript
JavaScript中的高级函数
2018/01/04 Javascript
微信小程序slider组件使用详解
2018/01/31 Javascript
Vue实现左右菜单联动实现代码
2018/08/12 Javascript
微信小程序webview实现长按点击识别二维码功能示例
2019/01/24 Javascript
layui 数据表格 根据值(1=业务,2=机构)显示中文名称示例
2019/10/26 Javascript
Python3计算三角形的面积代码
2017/12/18 Python
Python Pandas数据结构简单介绍
2019/07/03 Python
详解django中Template语言
2020/02/22 Python
HTML5 video 上传预览图片视频如何设置、预览视频某秒的海报帧
2018/08/28 HTML / CSS
美国狗旅行和户外用品领先供应商:kurgo
2020/08/18 全球购物
string = null 和string = ''的区别
2013/04/28 面试题
传媒专业推荐信范文
2013/11/23 职场文书
一岗双责责任书
2014/04/15 职场文书
2014年科普工作总结
2014/12/06 职场文书
2014年敬老院工作总结
2014/12/08 职场文书
在人间读书笔记
2015/06/30 职场文书
小学音乐课教学反思
2016/02/18 职场文书
MySQL pt-slave-restart工具的使用简介
2021/04/07 MySQL