浅谈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 相关文章推荐
脚本安需导入(装载)的三种模式的对比
Jun 24 Javascript
JavaScript 密码强度判断代码
Sep 05 Javascript
javascript使用window.open提示“已经计划系统关机”的原因
Aug 15 Javascript
Javascript 计算字符串在localStorage中所占字节数
Oct 21 Javascript
很实用的js选项卡切换效果
Aug 12 Javascript
DOM 事件的深入浅出(二)
Dec 05 Javascript
vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)
Feb 10 Javascript
AngularJS下$http服务Post方法传递json参数的实例
Mar 29 Javascript
在 Vue 应用中使用 Netlify 表单功能的方法详解
Jun 03 Javascript
浅谈目前可以使用ES10的5个新特性
Jun 25 Javascript
jQuery实现滑动开关效果
Aug 02 jQuery
jQuery实现简单轮播图效果
Dec 27 jQuery
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与MySQL开发的8个技巧小结
2010/12/17 PHP
php入门学习知识点五 关于php数组的几个基本操作
2011/07/14 PHP
php实现概率性随机抽奖代码
2016/01/02 PHP
Yii框架批量插入数据扩展类的简单实现方法
2017/05/23 PHP
php面向对象基础详解【星际争霸游戏案例】
2020/01/23 PHP
Prototype源码浅析 String部分(三)之HTML字符串处理
2012/01/15 Javascript
js使用removeChild方法动态删除div元素
2014/08/01 Javascript
JavaScript中textRange对象使用方法小结
2015/03/24 Javascript
jQuery插件kinMaxShow扩展效果用法实例
2015/05/04 Javascript
JS+CSS实现鼠标滑过时动态翻滚的导航条效果
2015/09/24 Javascript
jstree单选功能的实现方法
2017/06/07 Javascript
详解vue-cli 接口代理配置
2017/12/13 Javascript
vue项目中的webpack-dev-sever配置方法
2017/12/14 Javascript
Next.js项目实战踩坑指南(笔记)
2018/11/29 Javascript
如何用RxJS实现Redux Form
2018/12/29 Javascript
Vue 表情包输入组件的实现代码
2019/01/21 Javascript
js实现随机数小游戏
2019/06/28 Javascript
9种方法优化jQuery代码详解
2020/02/04 jQuery
[04:52]第二届DOTA2亚洲邀请赛主赛事第一天比赛集锦:OG娜迦海妖放大配合谜团大中3人
2017/04/02 DOTA
[49:08]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第一场 11.27
2020/12/01 DOTA
Python编程之列表操作实例详解【创建、使用、更新、删除】
2017/07/22 Python
python模块smtplib实现纯文本邮件发送功能
2018/05/22 Python
python requests post多层字典的方法
2018/12/27 Python
Python之使用adb shell命令启动应用的方法详解
2019/01/07 Python
python中数组和矩阵乘法及使用总结(推荐)
2019/05/18 Python
python列表推导和生成器表达式知识点总结
2020/01/10 Python
wxPython修改文本框颜色过程解析
2020/02/14 Python
Softmax函数原理及Python实现过程解析
2020/05/22 Python
Python实现树莓派摄像头持续录像并传送到主机的步骤
2020/11/30 Python
党员公开承诺书和承诺事项
2014/03/25 职场文书
2014年民主评议党员个人总结
2014/09/24 职场文书
国际政治学专业推荐信
2014/09/26 职场文书
销售辞职信范文
2015/03/02 职场文书
读《解忧杂货店》有感:请相信一切都是最好的安排
2019/11/07 职场文书
Vue项目打包、合并及压缩优化网页响应速度
2021/07/07 Vue.js
Python selenium绕过webdriver监测执行javascript
2022/04/12 Python