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 相关文章推荐
一个分享按钮的插件使用介绍(可扩展,内附开发制作流程)
Sep 19 Javascript
javascript 实现键盘上下左右功能的小例子
Sep 15 Javascript
鼠标选择动态改变网页背景颜色的JS代码
Dec 10 Javascript
Egret引擎开发指南之运行项目
Sep 03 Javascript
JQuery 给元素绑定click事件多次执行的解决方法
Sep 09 Javascript
JS+CSS实现精美的二级导航效果代码
Sep 17 Javascript
使用jsonp实现跨域获取数据实例讲解
Dec 25 Javascript
使用Vue如何写一个双向数据绑定(面试常见)
Apr 20 Javascript
基于Vue-cli快速搭建项目的完整步骤
Nov 03 Javascript
gulp构建小程序的方法步骤
May 31 Javascript
简单谈谈javascript高级特性
Sep 04 Javascript
javascript 数组精简技巧小结
Feb 26 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
古巴咖啡 Cubita琥爵咖啡 独特的加勒比海风味咖啡
2021/03/06 新手入门
十天学会php(3)
2006/10/09 PHP
用PHP连接Oracle数据库
2006/10/09 PHP
PHP 实现多服务器共享 SESSION 数据
2009/08/15 PHP
PHP四种基本排序算法示例
2015/04/09 PHP
WordPress中对访客评论功能的一些优化方法
2015/11/24 PHP
js escape,unescape解决中文乱码问题的方法
2010/05/26 Javascript
验证javascript中Object和Function的关系的三段简单代码
2010/06/27 Javascript
js showModalDialog参数的使用详解
2014/01/07 Javascript
jQuery对象和DOM对象之间相互转换的方法介绍
2015/02/28 Javascript
ajax异步请求详解
2017/01/06 Javascript
bootstrap表单示例代码分享
2017/05/18 Javascript
在Mac下彻底卸载node和npm的方法
2018/05/16 Javascript
Vue数据双向绑定原理及简单实现方法
2018/05/18 Javascript
微信小程序数据分析之自定义分析的实现
2018/08/17 Javascript
微信小程序显示倒计时功能示例【测试可用】
2018/12/03 Javascript
Electron 打包问题:electron-builder 下载各种依赖出错(推荐)
2020/07/09 Javascript
如何在JavaScript中正确处理变量
2020/12/25 Javascript
[02:51]DOTA2 Supermajor小组分组对阵抽签仪式
2018/06/01 DOTA
编写同时兼容Python2.x与Python3.x版本的代码的几个示例
2015/03/30 Python
用Python代码来解图片迷宫的方法整理
2015/04/02 Python
利用numpy+matplotlib绘图的基本操作教程
2017/05/03 Python
python编写暴力破解zip文档程序的实例讲解
2018/04/24 Python
Pandas 合并多个Dataframe(merge,concat)的方法
2018/06/08 Python
使用python实现快速搭建简易的FTP服务器
2018/09/12 Python
python3 打开外部程序及关闭的示例
2018/11/06 Python
Python线性拟合实现函数与用法示例
2018/12/13 Python
对python 多个分隔符split 的实例详解
2018/12/20 Python
通过实例解析Python RPC实现原理及方法
2020/07/07 Python
python实现一个简单RPC框架的示例
2020/10/28 Python
Exoticca英国:以最优惠的价格提供豪华异国情调旅行
2018/10/18 全球购物
乡镇党的群众路线教育实践活动总结报告
2014/10/30 职场文书
法定代表人证明书
2014/11/28 职场文书
幼儿教师年度个人总结
2015/02/05 职场文书
导游词之贵州织金洞
2019/10/12 职场文书
sql注入报错之注入原理实例解析
2022/06/10 MySQL