[问题] Vue点到子路由,父级,无法高亮

【原因】多是因为链接简写相对路径没有写完整导致

【解决】把子路由的router-link的to属性里链接写完整、并把router配置文件里path也写完整即可

1. hello.vue

【1】以下是路由链接 注意路径to要加上主组件,这样点到子路由里,主路由设置颜色才不会消失

<template>
<div>
<div id='left'>
<h1>hello子组件</h1>
<!-- 【1】以下是路由链接 注意路径to要加上主组件,这样点到子路由里,主路由设置颜色才不会消失-->
<router-link to="/hello/heChild/hello1">hellow1</router-link><br/>
<router-link to="/hello/heChild/hello2">hellow2</router-link><br/>
<router-link to="/hello/heChild/hello3">hellow3</router-link><br/>
</div> <div id='right'>
<!-- 点路由后,其视频插入的位置 -->
<router-view></router-view>
</div>
</div>
</template> <script>
export default{
name:'hello',
data(){
return{}
}
}
</script> <style scoped>
/* 对页面进行布局 */
#left {
float:left;
width:280px;
min-height: 700px;
background: lightskyblue;
} #right {
width:100%;
min-height:700px;
}
</style>

2. router.js

重点:【1】-【3】

import Vue from 'vue'
import VueRouter from 'vue-router' //引入路由
import Parent from './components/parent.vue'//引入组件
import Hello from './components/hello.vue'//引入组件2 import Hello1 from './components/heChild/hello1.vue'//以下3个为引入对应的子组件
import Hello2 from './components/heChild/hello2.vue'
import Hello3 from './components/heChild/hello3.vue' import Wa from './components/wa.vue' //引入第3个组件 Vue.use(VueRouter)//使用路由 export default new VueRouter({
linkActiveClass:'active',//【0】设置路由链接处理激活状态的style样式class名(默认值: "router-link-active" )
routes: [
{
path: "/",
name:'parent',
component:Parent ,
},
//【1】带子路由的hello组件配置开始
{
path: "/hello",
name:'hello',
component:Hello ,
redirect:'/hello/heChild/hello1',//【2】路径要写完整前面带上主路由 /hello/子路由路径/子路由
//【3】子路由配置开始
children:[{
path:'/hello/heChild/hello1',//【4】子路由,注意路径
name:'hello1',
component:Hello1,
},
{
path:'/hello/heChild/hello2',//【5】子路由,注意路径
name:'hello2',
component:Hello2,
},
{
path:'/hello/heChild/hello3',// 【6】子路由,注意路径
name:'hello3',
component:Hello3,
}]
},
{
path: "/wa/:count/:name",
name:'wa',
component:Wa,
}, ]
})

3. App.vue里设置全局,路由处于active状态样式

<style>
.active {
color:red;
}
</style>

效果:

Vue点到子路由,父级,无法高亮问题解决的更多相关文章

  1. vue使用子路由时,默认的子路由视图不显示问题

    解决办法是,将父级的name去掉.(大多数情况下是按name来跳转的,不过这样一改,调到父级就得用路径跳转了): 下面上一下路由的配置: { path: "/index", com ...

  2. vue 实现子向父传值

    父组件 <template> <div id="app"> <child @onChange='onChildValue'></child ...

  3. JS 父页面调子页面(2种情况),子掉父级(1种)(转)

    A :父级调用子级页面 ,非IFRAME情况,类似平级: window.open("子页面.html", "", "width=1024,height ...

  4. vue的子传父

    子组件传值给父组件,需要触发一个事件. 在这个事件里,使用this.$emit("父组件使用的名称","子组件的数据") 在父组件中引用的子组件,在子组件的标签 ...

  5. vue $emit 子传父

    我们使用子组件传递值给父组件使用 $emit 代码 <!DOCTYPE html> <html lang="en"> <head> <me ...

  6. vue传值 ---- >> 子传父,$emit()

    划重点: $emit 绑定一个自定义事件event,当这个这个语句被执行到的时候,就会将参数arg传递给父组件,父组件通过@event监听并接收参数.   子组件:   1 <template& ...

  7. vue通过事件向父级组件发送消息(官网点击放大例子)

    注意:Vue.component一定要写在new Vue之前 在页面中使用组件 整体代码示例

  8. vue 添加子路由,并对路由重定向

    // 用户信息首页 { path: '/user/index', name: 'userIndex', component: userIndex, redirect: '/user/index/sho ...

  9. Sqlserver如何递归查询层级数据将父级字段和本级某个字段合并?如何自定义用户函数并调用?

    开门见山,首先说下遇到的问题:前期系统地区字典表中,每个省市县只存了本级名称,没存完整的字段.如:肥西县隶属安徽省合肥市,表中就存了一个肥西县.现有需求需要将完整字段显示,由于系统已在线上运营,无法做 ...

随机推荐

  1. Codeforces1301B. Motarack's Birthday

    题意是说给你一串数组,其中-1代表未知,求相邻两个数之差的绝对值最小,-1可以由k赋值,先考虑-1的情况,把k解出来,转换一下,就是绝对值之差最小情况,|k-a|,|k-b|,|k-c|,要使最大的最 ...

  2. Python爬虫教程-爬取5K分辨率超清唯美壁纸源码

    简介 壁纸的选择其实很大程度上能看出电脑主人的内心世界,有的人喜欢风景,有的人喜欢星空,有的人喜欢美女,有的人喜欢动物.然而,终究有一天你已经产生审美疲劳了,但你下定决定要换壁纸的时候,又发现网上的壁 ...

  3. SQLite、MySQL和PostgreSQL 三种关系数据库哪个好?

    关系型数据库的使用已经有相当长的时间了.它们变得流行起来托了管理系统的福,关系模型被实现得相当的好,并且被证明是操作数据的好方法(特别是事务性强的应用). 在这篇DigitalOcean文章中,我们将 ...

  4. vb.net 写日志文件

    Module mod_LogAccessHt #Region "Const" Public Const __PREFIX_ERROR__ As String = "Err ...

  5. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表格:将悬停的颜色应用在行或者单元格上

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. 解决Ubuntu(linux)系统中PHP的curl函数无法使用的问题

    我之前用的Windows的服务器,未出现问题,后来把服务器重装了系统,今天在学微信公众号获取信息的时候,发现curl函数出现了问题...... 解决方法 首先连接上服务器,找到/etc/php/7.0 ...

  7. PaperReading20200221

    CanChen ggchen@mail.ustc.edu.cn Busy... Human-level concept learning through probabilistic program i ...

  8. java并发之CopyOnWirteArrayList

    java并发之CopyOnWirteArrayList CopyOnWirteArrayList的实现 它用了ReentrantLock保证了add,set,remove操作的安全,同时使用volat ...

  9. 使用input选择本地图片,并且实现预览功能

    1.使用input标签选择本地图片文件 用一个盒子来存放预览的图片 2.JS实现预览 首先添加一个input change事件,再用到 URL.createObjectURL() 方法 用来创建 UR ...

  10. Linux centosVMware 压缩打包介绍、gzip压缩工具、bzip2压缩工具、xz压缩工具。

    一.压缩打包介绍 Lnux下常见的压缩文件通常是.tar.gz模式,还有.tar..gz..bz2..zip..tar.bz2..tar.xz. .gz:表示由gzip压缩工具压缩的文件 .bz2:表 ...