vue.js默认路由不加载linkActiveClass问题的解决方法
更新时间：2017年12月11日 14:40:57 作者：蓝调爵士
这篇文章主要给大家介绍了关于vue.js默认路由不加载linkActiveClass问题的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
发现问题
最近在打开项目的时候，发现我的默认路由没加载上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里面修改了引用地址一个道理，虽然表面上看着是个根目录，其实引用的是别的路由界面。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
相关文章
这篇文章主要介绍了vue打包添加gzip配置项方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
.sync修饰符算是Vue的所有修饰符中较难理解的一个，本篇文章就带你走近.sync的世界，深入理解后会发现，其实也就那么回事。修饰符和指令息息相关，下面从指令 ->修饰符->.sync修饰符由浅入深地来讲解 .sync的含义及用法。2021-05-05
本文主要介绍了Vue.js实现对视频预览的示例代码,通过监听文件选择事件和使用FileReader API,可以实现视频文件的预览功能,感兴趣的可以了解一下2025-01-01
刚刚接到领导通知，需要实现搜索功能，因为项目是vue的而且是手机端，对我来说有点小难度。经过小编的一番思索最终还是解决了，今天小编把实现过程分享到脚本之家平台，需要的朋友参考下2020-02-02
全局指令是Vue.js中的一种自定义指令,可以在整个应用中重复使用,通过Vue.directive方法定义,可以在组件内部直接使用,指令有多个生命周期钩子,可以接收参数和修饰符,提高代码复用性和可维护性,本文介绍vue全局指令文件directives,感兴趣的朋友一起看看吧2025-02-02
vue中计算属性computed和普通属性method的区别小结
Vue.js中Computed和Methods是两种常用的数据处理方式,本文主要介绍了vue中计算属性computed和普通属性method的区别小结,具有一定的参考价值,感兴趣的可以了解一下2024-06-06
这篇文章主要介绍了mpvue开发音频类小程序踩坑和建议详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-03-03
这篇文章主要介绍了详解vue axios用post提交的数据格式，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
本篇是我对vue使用过程中以及对一些社区朋友提问我的问题中做的一些总结，感兴趣的朋友跟随脚本之家小编一起学习吧2018-02-02
本文将探讨 Vue 事件处理中常见的上下文问题及其解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-03-03
最新评论