浅谈vue 二级路由嵌套和二级路由高亮问题


Posted in Javascript onAugust 06, 2020

第一层路由我写在app.vue里面。如图所示:

浅谈vue 二级路由嵌套和二级路由高亮问题

footer.vue:

浅谈vue 二级路由嵌套和二级路由高亮问题

二级路由是这样:

浅谈vue 二级路由嵌套和二级路由高亮问题

index.js里面的配置:

浅谈vue 二级路由嵌套和二级路由高亮问题

效果图:

浅谈vue 二级路由嵌套和二级路由高亮问题

效果出来了,又出现新的问题,就是点击二级路由的时候,默认的二级路由高亮不会去掉,如图所示:

浅谈vue 二级路由嵌套和二级路由高亮问题

在网上看到别人用exact方法,即在默认的二级路由里面加上exact,如图所示:

浅谈vue 二级路由嵌套和二级路由高亮问题

补充知识:vue - 子路由-路由嵌套

描述:子路由,也叫路由嵌套,采用在children后跟路由数组来实现,数组里和其他配置路由基本相同,需要配置path和component,然后在相应部分添加<router-view/>来展现子页面信息,相当于嵌入iframe。

浅谈vue 二级路由嵌套和二级路由高亮问题

Home.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <!-- 添加子路由导航 -->
    <p>导航 :
      <router-link to="/home">首页</router-link> | 
      <router-link to="/home/one">-子页面1</router-link> |
      <router-link to="/home/two">-子页面2</router-link>
    </p>
    <!-- 子页面展示部分 -->
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data () {
    return {
      msg: 'Home Page!'
    }
  }
}
</script>

<style scoped>
</style>

One.vue /Two.vue

<template>
 <div class="hello">
  <h1>{{ msg }}</h1>
 </div>
</template>

<script>
export default {
 name: "One",
 data() {
  return {
   msg: "Welcome to One!"
  };
 }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
 font-weight: normal;
}
ul {
 list-style-type: none;
 padding: 0;
}
li {
 display: inline-block;
 margin: 0 10px;
}
a {
 color: #42b983;
}
</style>

index.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import One from '@/components/One' 
import Two from '@/components/Two'

Vue.use(Router)

export default new Router({
  routes: [
  {
    path: '/', // 默认页面重定向到主页
    redirect: '/home'
  },
  {
    path: '/home', // 主页路由
    name: 'Home',
    component: Home,
    children:[ // 嵌套子路由
      {
        path:'one', // 子页面1
        component:One
      },
      {
        path:'two', // 子页面2
        component:Two
      },
    ]
  }
  ]
})

以上这篇浅谈vue 二级路由嵌套和二级路由高亮问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 常用代码技巧大收集
Feb 25 Javascript
javascript replace()正则替换实现代码
Feb 26 Javascript
JavaScript操作class和style样式代码详解
Feb 13 Javascript
JavaScript的ExtJS框架中表格的编写教程
May 21 Javascript
AngularJs bootstrap搭载前台框架——基础页面
Sep 01 Javascript
微信小程序 表单Form实例详解(附源码)
Dec 22 Javascript
BootStrap实现轮播图效果(收藏)
Dec 30 Javascript
在微信小程序中渲染HTML内容的方法示例
Sep 28 Javascript
JS实现计算小于非负数n的素数的数量算法示例
Feb 26 Javascript
Ajax请求时无法重定向的问题解决代码详解
Jun 21 Javascript
使用Node.js在深度学习中做图片预处理的方法
Sep 18 Javascript
vue中使用腾讯云Im的示例
Oct 23 Javascript
vue项目实现设置根据路由高亮对应的菜单项操作
Aug 06 #Javascript
javascript实现时间日期的格式化的方法汇总
Aug 06 #Javascript
vue+ElementUI 关闭对话框清空验证,清除form表单的操作
Aug 06 #Javascript
javascript读取本地文件和目录方法详解
Aug 06 #Javascript
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
Aug 06 #Javascript
javascript实现页面的实时时钟显示示例
Aug 06 #Javascript
Javascript如何递归遍历本地文件夹
Aug 06 #Javascript
You might like
PHP反转字符串函数strrev()函数的用法
2012/02/04 PHP
PHP三元运算的2种写法代码实例
2014/05/12 PHP
Windows Server 2008 R2和2012中PHP连接MySQL过慢的解决方法
2016/07/02 PHP
PHP SPL 被遗落的宝石【SPL应用浅析】
2018/04/20 PHP
Linux下 php7安装redis的方法
2018/11/01 PHP
javascript基础的动画教程,直观易懂
2007/01/10 Javascript
学习ExtJS Panel常用方法
2009/10/07 Javascript
仿当当网淘宝网等主流电子商务网站商品分类导航菜单
2013/09/25 Javascript
Jquery中$.post和$.ajax的用法小结
2015/04/28 Javascript
javascript实现密码验证
2015/11/10 Javascript
AngularJS入门教程之路由与多视图详解
2016/08/19 Javascript
基于JavaScript实现前端文件的断点续传
2016/10/17 Javascript
JavaScript中return用法示例
2016/11/29 Javascript
angularjs实现简单的购物车功能
2017/09/21 Javascript
Vue.js+Layer表格数据绑定与实现更新的实例
2018/03/07 Javascript
10分钟上手vue-cli 3.0 入门介绍
2018/04/04 Javascript
微信小程序进入广告实现代码实例
2019/09/19 Javascript
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
2019/12/15 Javascript
JS代码优化的8点建议
2020/02/04 Javascript
Vant 在vue-cli 4.x中按需加载操作
2020/11/05 Javascript
分析python服务器拒绝服务攻击代码
2014/01/16 Python
Python中模拟enum枚举类型的5种方法分享
2014/11/22 Python
pandas全表查询定位某个值所在行列的方法
2018/04/12 Python
如何用python整理附件
2018/05/13 Python
python 创建一个空dataframe 然后添加行数据的实例
2018/06/07 Python
python对list中的每个元素进行某种操作的方法
2018/06/29 Python
python爬虫刷访问量 2019 7月
2019/08/01 Python
使用 Python 在京东上抢口罩的思路详解
2020/02/27 Python
django的模型类管理器——数据库操作的封装详解
2020/04/01 Python
python3.7.3版本和django2.2.3版本是否可以兼容
2020/09/01 Python
Urban Outfitters美国官网:美国生活方式品牌
2016/08/26 全球购物
毕业生就业推荐表自我鉴定
2014/03/20 职场文书
研究生考核个人自我鉴定
2014/03/27 职场文书
模特大赛策划方案
2014/05/28 职场文书
企业授权委托书范本
2014/09/22 职场文书
2015年幼儿园元旦游艺活动策划书
2014/12/09 职场文书