浅谈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 基础篇之对象、数组使用介绍(三)
Apr 07 Javascript
用js的for循环获取radio选中的值
Oct 21 Javascript
原生js做的手风琴效果的导航菜单
Nov 08 Javascript
基于javascript实现泡泡大冒险网页版小游戏
Mar 23 Javascript
Bootstrap网格系统详解
Apr 26 Javascript
Angular 应用技巧总结
Sep 14 Javascript
JavaScript浮点数及运算精度调整详解
Oct 21 Javascript
如何更好的编写js async函数
May 13 Javascript
原生JS实现动态加载js文件并在加载成功后执行回调函数的方法
Dec 30 Javascript
微信小程序云开发之数据库操作
May 18 Javascript
ES6 Promise对象的应用实例分析
Jun 27 Javascript
vue使用better-scroll实现滑动以及左右联动
Jun 30 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强制运行广告的方法
2014/12/01 PHP
php控制文件下载速度的方法
2015/03/24 PHP
yii2.0使用Plupload实现带缩放功能的多图上传
2015/12/22 PHP
ThinkPHP连接Oracle数据库
2016/04/22 PHP
PHP数组的定义、初始化和数组元素的显示实现代码
2016/11/05 PHP
PHP扩展类型及安装方式解析
2020/04/27 PHP
Javascript操纵Cookie实现购物车程序
2006/11/23 Javascript
高性能web开发 如何加载JS,JS应该放在什么位置?
2010/05/14 Javascript
初识JQuery 实例一(first)
2011/03/16 Javascript
通过onmouseover选项卡实现img图片的变化
2014/02/12 Javascript
解决js函数闭包内存泄露问题的办法
2016/01/25 Javascript
JavaScript模仿Pinterest实现图片预加载功能
2016/10/25 Javascript
使用AngularJS 跨站请求如何解决jsonp请求问题
2017/01/16 Javascript
JS手机端touch事件计算滑动距离的方法示例
2017/10/26 Javascript
关于redux-saga中take使用方法详解
2018/02/27 Javascript
前端js中的事件循环eventloop机制详解
2019/05/15 Javascript
Vue Element UI + OSS实现上传文件功能
2019/07/31 Javascript
深入理解 ES6中的 Reflect用法
2020/07/18 Javascript
JavaScript代码实现简单计算器
2020/12/27 Javascript
[46:14]VGJ.T vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python基础教程之实现石头剪刀布游戏示例
2014/02/11 Python
Python程序员开发中常犯的10个错误
2014/07/07 Python
pygame学习笔记(5):游戏精灵
2015/04/15 Python
Python并发编程协程(Coroutine)之Gevent详解
2017/12/27 Python
Python+树莓派+YOLO打造一款人工智能照相机
2018/01/02 Python
python 顺时针打印矩阵的超简洁代码
2018/11/14 Python
解决Python 异常TypeError: cannot concatenate 'str' and 'int' objects
2020/04/08 Python
Django搭建项目实战与避坑细节详解
2020/12/06 Python
canvas画图被放大且模糊的解决方法
2020/08/11 HTML / CSS
美国派对用品及装饰品网上商店:Shindigz
2016/07/30 全球购物
美国皮靴公司自1863年:The Frye Company
2016/11/30 全球购物
加拿大的标志性百货公司:Hudson’s Bay(哈得逊湾)
2019/09/03 全球购物
华为消费者德国官方网站:HUAWEI德国
2020/11/03 全球购物
毕业生自荐信如何写
2014/03/24 职场文书
实习生矿工检讨书
2014/10/13 职场文书
Nginx 路由转发和反向代理location配置实现
2021/11/11 Servers