浅谈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 相关文章推荐
juqery 学习之三 选择器 简单 内容
Nov 25 Javascript
javascript检测两个数组是否相似
May 19 Javascript
jquery获取select选中值的方法分析
Dec 22 Javascript
在IE8上JS实现combobox支持拼音检索功能
May 23 Javascript
JS阻止事件冒泡行为和闭包的方法
Jun 16 Javascript
jQuery基本过滤选择器用法示例
Sep 09 Javascript
jQuery结合jQuery.cookie.js插件实现换肤功能示例
Oct 14 jQuery
快速搭建vue2.0+boostrap项目的方法
Apr 09 Javascript
小程序实现列表多个批量倒计时
Jan 29 Javascript
layui-tree实现Ajax异步请求后动态添加节点的方法
Sep 23 Javascript
vue+ElementUI 关闭对话框清空验证,清除form表单的操作
Aug 06 Javascript
js轮播图之旋转木马效果
Oct 13 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生成便于打印的网页
2006/10/09 PHP
PHP连接SQLSERVER 注意事项(附dll文件下载)
2012/06/28 PHP
PHP实现ASCII码与字符串相互转换的方法
2017/04/29 PHP
PHP面向对象程序设计内置标准类,普通数据类型转为对象类型示例
2019/06/12 PHP
基于jquery的超简单上下翻
2010/04/20 Javascript
cnblogs TagCloud基于jquery的实现代码
2010/06/11 Javascript
Json对象替换字符串占位符实现代码
2010/11/17 Javascript
js实现YouKu的漂亮搜索框效果
2015/08/19 Javascript
jquery表单插件Autotab使用方法详解
2016/06/24 Javascript
Web打印解决方案之证件套打的实现思路
2016/08/29 Javascript
javascript实现根据汉字获取简拼
2016/09/25 Javascript
无循环 JavaScript(map、reduce、filter和find)
2017/04/08 Javascript
javascript数组去重常用方法实例分析
2017/04/11 Javascript
详解angular ui-grid之过滤器设置
2017/06/07 Javascript
jQuery实现模糊搜索功能的方法分析
2018/06/29 jQuery
js的Object.assign用法示例分析
2020/03/05 Javascript
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
2020/04/07 Javascript
Vue将props值实时传递 并可修改的操作
2020/08/09 Javascript
使用Vue实现一个树组件的示例
2020/11/06 Javascript
[02:28]DOTA2英雄基础教程 狼人
2013/12/23 DOTA
Numpy中对向量、矩阵的使用详解
2019/10/29 Python
浅谈Keras参数 input_shape、input_dim和input_length用法
2020/06/29 Python
使用Python解析Chrome浏览器书签的示例
2020/11/13 Python
使用html2canvas.js实现页面截图并显示或上传的示例代码
2018/12/18 HTML / CSS
捷克体育用品购物网站:D-sport
2017/12/28 全球购物
捷克时尚网上商店:OTTO
2018/03/15 全球购物
Pam & Gela官网:美国性感前卫女装品牌
2018/07/19 全球购物
手工制作的音乐盒:Music Box Attic
2019/09/05 全球购物
Oral-B荷兰:牙医最推荐的品牌
2020/02/25 全球购物
经典c++面试题五
2014/12/17 面试题
什么是跨站脚本攻击
2014/12/11 面试题
岗位竞聘书范文
2014/03/31 职场文书
个人三严三实对照检查材料
2014/09/25 职场文书
尼克胡哲观后感
2015/06/08 职场文书
php 获取音视频时长,PHP 利用getid3 获取音频文件时长等数据
2021/04/01 PHP
postgresql使用filter进行多维度聚合的解决方法
2021/07/16 PostgreSQL