时间:2021-05-18
第一层路由我写在app.vue里面。如图所示:
footer.vue:
二级路由是这样:
index.js里面的配置:
效果图:
效果出来了,又出现新的问题,就是点击二级路由的时候,默认的二级路由高亮不会去掉,如图所示:
在网上看到别人用exact方法,即在默认的二级路由里面加上exact,如图所示:
补充知识:vue - 子路由-路由嵌套
描述:子路由,也叫路由嵌套,采用在children后跟路由数组来实现,数组里和其他配置路由基本相同,需要配置path和component,然后在相应部分添加<router-view/>来展现子页面信息,相当于嵌入iframe。
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 二级路由嵌套和二级路由高亮问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
Vue嵌套路由:实现效果(路由三层嵌套,点击一级tab显示二级tab效果,二级tab点击切换对应内容,不在tab区域里的内容,切换时不重复渲染):Demo访问时
项目当中使用vue的时候一定会用到路由,并且二级路由甚至三集路由的需求都是刚需,当然,多级路由的配置方法和二级的是一样的,简单讲讲二级路由的配置吧。首先把一级路
过WAN口IP地址控制二级路由器本身,而无法直接控制二级路由器下的终端。因此需要在二级路由器界面对二级路由器下面的终端进行限制。LAN-LAN级联指从主路由器的
主路由下接二级路由,不能缓解主路由的压力;主路由接二级路由后数据包的总量是没有减少的,连接二级路由器只能解决DHCP服务不足的情况。 路由器(Router,又
怎么访问二级路由?路由器上还可以安装二级路由,想要用电脑访问二级路由,该怎么访问呢?下面我们就来看看详细的教程。1、打开路由器界面,输入用户密码登录路由器。2、