vue-cli 默认路由再子路由选中下的选中状态问题及解决代码


Posted in Javascript onSeptember 06, 2018

vue-cli是Vue.js官方脚手架命令行工具,我们可以用它快速搭建Vue.js项目,vue-cli最主要的功能就是初始化项目,既可以使用官方模板,也可以使用自定义模板生成项目,而且从2.8.0版本开始,vue-cli新增了build命令,能让你零配置启动一个Vue.js应用。

因项目需求,需要在默认路由下面的两个子路由进行切换,当开始以为不就是路由切换?so easy!就看一下遇到的问题吧!

{path: '/',component: resolve => require(['@/components/LiveList'],resolve),
  children:[
  {
  path:'',
  name:'livelist',
  meta:{title:'',index:0},
  component: resolve => require(['@/components/compts/livelistcom'],resolve)
  },{
  path:'livenew',
  name:'livenew',
  meta:{title:'',index:1},
  component: resolve => require(['@/components/compts/livelistnew'],resolve)
  }]
 },
{
 path:'/user',
 name:'user',
 meta:{title:'用户',index:4},
 component: resolve => require(['@/components/user'],resolve)
},

这路由一看没问题吧!

<router-link to="/"><p>首页</p></router-link>//这是底部的切换路由
//下面两个便是首页下面的两个子路由的跳转了
<li><router-link to="/">热门</router-link></li>
<li><router-link to="/livenew">最新</router-link></li>

看到上面的代码是不是没有发现错误?其实也的确可以运行!而且两个子路由切换关于首页的状态也是没有问题的!

但是当我切换user路由的时候发现,首页路由的状态依旧是选中状态 ,这个让我很纳闷,按理说user路由跟首页的路由是同级,不出出现这样的问题。既然出现了,为了工作,只能迎难而上,去解决这个问题。

在经过我仔细的查找文档,终于想到了一种解决方案:在官方文档里面有一个 redirect (重定向) router.vuejs.org/zh/guide/es… 点击链接可以查看官方文档

既然可以重定向那我就试一下这种来解决(毕竟上面的代码和逻辑事再想不出是什么地方出的错误,还望大神指点一二!!!)

废话不多说,直接先解决后的代码:

{path:'',redirect: '/index'},
 {path: '/index',component: resolve => require(['@/components/LiveList'],resolve),
  children:[
  {path:'',redirect:'livelist'},
  {
  path:'livelist',
  name:'livelist',
  meta:{title:'',index:0},
  component: resolve => require(['@/components/compts/livelistcom'],resolve)
  },{
  path:'livenew',
  name:'livenew',
  meta:{title:'',index:1},
  component: resolve => require(['@/components/compts/livelistnew'],resolve)
  }]
 },
 {
  path:'/user',
  name:'user',
  meta:{title:'用户',index:4},
  component: resolve => require(['@/components/user'],resolve)
 }

而关于路由的跳转也有一些小变化:

<router-link to="/index"><p>首页</p></router-link>//这里依旧是底部导航
//这里便是首页的两个子路由的跳转按钮了
<li><router-link to="/index/livelist">热门</router-link></li>
<li><router-link to="/index/livenew">最新</router-link></li>

构思 :用重定向,规定默认路由跳转到上面  /index 下面默认的子路由,再由默认的子路由去定向到子路由的  livelist 。(这是在解决问题的时候发现,非默认路由下,子路由切换不会造成默认路由选中不取消的问题,而默认路由一直会存在一个 router-link-active的类名,我的选中样式也是基于它的 )

关于选中时自定义自己的样式可以操作.router-link-active 这个类,而默认路由一直存在这个类,如果没有子路由,或者子路由选中不需要显示父路由也为选中状态的情况下,你可以操作.router-link-exact-active这个类来写自己的选中样式。

总结

以上所述是小编给大家介绍的vue-cli 默认路由再子路由选中下的选中状态问题及解决代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
为EasyUI的Tab标签添加右键菜单的方法
Jul 14 Javascript
div拖拽插件——JQ.MoveBox.js(自制JQ插件)
May 17 Javascript
JS文本框追加多个下拉框的值的简单实例
Jul 12 Javascript
AngularJS 模型详细介绍及实例代码
Jul 27 Javascript
Node.js中的require.resolve方法使用简介
Apr 23 Javascript
详解JS中的柯里化(currying)
Aug 17 Javascript
详解webpack的配置文件entry与output
Aug 21 Javascript
jQuery实现滚动效果
Nov 17 jQuery
Node.js创建Web、TCP服务器
Dec 05 Javascript
vue主动刷新页面及列表数据删除后的刷新实例
Sep 16 Javascript
纯js+css实现在线时钟
Aug 18 Javascript
javascript局部自定义鼠标右键菜单
Dec 08 Javascript
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 #jQuery
Vue下拉框回显并默认选中随机问题
Sep 06 #Javascript
vue兄弟组件传递数据的实例
Sep 06 #Javascript
webpack4简单入门实例
Sep 06 #Javascript
jQuery实现动画、消失、显现、渐出、渐入效果示例
Sep 06 #jQuery
对vue中v-on绑定自定事件的实例讲解
Sep 06 #Javascript
微信小程序开发之自定义tabBar的实现
Sep 06 #Javascript
You might like
短波的认识
2021/03/01 无线电
MySQL中create table语句的基本语法是
2007/01/15 PHP
laravel实现一个上传图片的接口,并建立软链接,访问图片的方法
2019/10/12 PHP
cssQuery()的下载与使用方法
2007/01/12 Javascript
window.open的页面如何刷新(父页面)上层页面
2012/12/28 Javascript
document.documentElement的一些使用技巧
2013/04/18 Javascript
jquery控制左右箭头滚动图片列表的实例
2013/05/20 Javascript
javascript dom追加内容实现示例
2013/09/21 Javascript
js中for in语句的用法讲解
2015/04/24 Javascript
JavaScript获取一个范围内日期的方法
2015/04/24 Javascript
jQuery实现带有动画效果的回到顶部和底部代码
2015/11/04 Javascript
JS Ajax请求如何防止重复提交
2016/06/13 Javascript
js实现弹窗暗层效果
2017/01/16 Javascript
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
2018/04/27 jQuery
JS内部事件机制之单线程原理
2018/07/02 Javascript
ES6之Proxy的get方法详解
2019/10/11 Javascript
详解vue中$nextTick和$forceUpdate的用法
2019/12/11 Javascript
js在HTML的三种引用方式详解
2020/08/29 Javascript
vue中使用vue-pdf的方法详解
2020/09/05 Javascript
Python中条件判断语句的简单使用方法
2015/08/21 Python
python程序中的线程操作 concurrent模块使用详解
2019/09/23 Python
德国大型的家具商店:Pharao24.de
2016/10/02 全球购物
美国全球旅游运营商:Pacific Holidays
2018/06/18 全球购物
SKECHERS斯凯奇中国官网:来自美国的运动休闲品牌
2018/11/14 全球购物
英国奢华护肤、美容和Spa品牌:Temple Spa
2019/11/02 全球购物
怎样让char类型的东西转换成int类型
2013/12/09 面试题
合伙协议书范本
2014/04/21 职场文书
大学生个人先进事迹材料范文
2014/05/03 职场文书
2014年行政部工作总结
2014/11/19 职场文书
台风停课通知
2015/04/24 职场文书
如何写辞职信
2015/05/13 职场文书
2015年卫生院健康教育工作总结
2015/07/24 职场文书
Python爬虫:从m3u8文件里提取小视频的正确操作
2021/05/14 Python
MySql子查询IN的执行和优化的实现
2021/08/02 MySQL
MySQL中B树索引和B+树索引的区别详解
2022/03/03 MySQL
Python实现Matplotlib,Seaborn动态数据图
2022/05/06 Python