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高级教程5.6之基本包装类型(详细)
Nov 23 Javascript
javascript制作照片墙及制作过程中出现的问题
Apr 04 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
Jul 18 Javascript
jQuery 获取页面li数组并删除不在数组中的key
Aug 02 Javascript
微信小程序 框架详解及实例应用
Sep 26 Javascript
用move.js库实现百叶窗特效
Feb 08 Javascript
vue 国际化 vue-i18n 双语言 语言包
Jun 07 Javascript
Vue2.0 实现歌手列表滚动及右侧快速入口功能
Aug 08 Javascript
layer.js之回调销毁对话框的例子
Sep 11 Javascript
vue-cli创建的项目中的gitHooks原理解析
Feb 14 Javascript
JavaScript前端开发时数值运算的小技巧
Jul 28 Javascript
Express 配置HTML页面访问的实现
Nov 01 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设计模式之装饰者模式代码实例
2015/05/11 PHP
PHP的swoole扩展安装方法详细教程
2016/05/18 PHP
Yii配置与使用memcached缓存的方法
2016/07/13 PHP
PHP swoole和redis异步任务实现方法分析
2019/08/12 PHP
xml转json的js代码
2012/08/28 Javascript
IE的fireEvent方法概述及应用
2013/02/22 Javascript
JavaScript的漂亮的代码片段
2013/06/05 Javascript
jquery实现文字由下到上循环滚动的实例代码
2013/08/09 Javascript
node+express+jade制作简单网站指南
2014/11/26 Javascript
jquery+CSS实现的水平布局多级网页菜单效果
2015/08/24 Javascript
JavaScrip调试技巧之断点调试
2015/10/22 Javascript
jQuery css() 方法动态修改CSS属性
2016/09/25 Javascript
利用jQuery+localStorage实现一个简易的计时器示例代码
2017/12/25 jQuery
详解webpack中的hash、chunkhash、contenthash区别
2018/01/05 Javascript
4个顶级开源JavaScript图表库
2018/09/29 Javascript
微信公众平台 发送模板消息(Java接口开发)
2019/04/17 Javascript
小程序中设置缓存过期的实现方法
2020/01/14 Javascript
解决vue中el-tab-pane切换的问题
2020/07/19 Javascript
nuxt.js 在middleware(中间件)中实现路由鉴权操作
2020/11/06 Javascript
python实现把二维列表变为一维列表的方法分析
2019/10/08 Python
Anaconda+VSCode配置tensorflow开发环境的教程详解
2020/03/30 Python
Python Map 函数的使用
2020/08/28 Python
pycharm 实现复制一行的快捷键
2021/01/15 Python
美国时尚孕妇装品牌:A Pea in the Pod
2017/07/16 全球购物
皇家道尔顿官网:Royal Doulton
2017/12/06 全球购物
Richards网上商店:当代时尚,遍布巴西
2019/11/03 全球购物
优秀的毕业生的自我评价
2013/12/12 职场文书
运动会开幕式邀请函
2014/01/22 职场文书
黄河象教学反思
2014/02/10 职场文书
销售人员职业生涯规划范文
2014/03/01 职场文书
领导班子对照检查材料
2014/09/22 职场文书
资料员岗位职责
2015/02/10 职场文书
莫言获奖感言(全文)
2015/07/31 职场文书
mysql部分操作
2021/04/05 MySQL
python用海龟绘图写贪吃蛇游戏
2021/06/18 Python
据Python爬虫不靠谱预测可知今年双十一销售额将超过6000亿元
2021/11/11 Python