Vue点到子路由,父级,无法高亮问题解决
[问题] 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点到子路由,父级,无法高亮问题解决的更多相关文章
- vue使用子路由时,默认的子路由视图不显示问题
解决办法是,将父级的name去掉.(大多数情况下是按name来跳转的,不过这样一改,调到父级就得用路径跳转了): 下面上一下路由的配置: { path: "/index", com ...
- vue 实现子向父传值
父组件 <template> <div id="app"> <child @onChange='onChildValue'></child ...
- JS 父页面调子页面(2种情况),子掉父级(1种)(转)
A :父级调用子级页面 ,非IFRAME情况,类似平级: window.open("子页面.html", "", "width=1024,height ...
- vue的子传父
子组件传值给父组件,需要触发一个事件. 在这个事件里,使用this.$emit("父组件使用的名称","子组件的数据") 在父组件中引用的子组件,在子组件的标签 ...
- vue $emit 子传父
我们使用子组件传递值给父组件使用 $emit 代码 <!DOCTYPE html> <html lang="en"> <head> <me ...
- vue传值 ---- >> 子传父,$emit()
划重点: $emit 绑定一个自定义事件event,当这个这个语句被执行到的时候,就会将参数arg传递给父组件,父组件通过@event监听并接收参数. 子组件: 1 <template& ...
- vue通过事件向父级组件发送消息(官网点击放大例子)
注意:Vue.component一定要写在new Vue之前 在页面中使用组件 整体代码示例
- vue 添加子路由,并对路由重定向
// 用户信息首页 { path: '/user/index', name: 'userIndex', component: userIndex, redirect: '/user/index/sho ...
- Sqlserver如何递归查询层级数据将父级字段和本级某个字段合并?如何自定义用户函数并调用?
开门见山,首先说下遇到的问题:前期系统地区字典表中,每个省市县只存了本级名称,没存完整的字段.如:肥西县隶属安徽省合肥市,表中就存了一个肥西县.现有需求需要将完整字段显示,由于系统已在线上运营,无法做 ...
随机推荐
- Codeforces1301B. Motarack's Birthday
题意是说给你一串数组,其中-1代表未知,求相邻两个数之差的绝对值最小,-1可以由k赋值,先考虑-1的情况,把k解出来,转换一下,就是绝对值之差最小情况,|k-a|,|k-b|,|k-c|,要使最大的最 ...
- Python爬虫教程-爬取5K分辨率超清唯美壁纸源码
简介 壁纸的选择其实很大程度上能看出电脑主人的内心世界,有的人喜欢风景,有的人喜欢星空,有的人喜欢美女,有的人喜欢动物.然而,终究有一天你已经产生审美疲劳了,但你下定决定要换壁纸的时候,又发现网上的壁 ...
- SQLite、MySQL和PostgreSQL 三种关系数据库哪个好?
关系型数据库的使用已经有相当长的时间了.它们变得流行起来托了管理系统的福,关系模型被实现得相当的好,并且被证明是操作数据的好方法(特别是事务性强的应用). 在这篇DigitalOcean文章中,我们将 ...
- vb.net 写日志文件
Module mod_LogAccessHt #Region "Const" Public Const __PREFIX_ERROR__ As String = "Err ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表格:将悬停的颜色应用在行或者单元格上
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 解决Ubuntu(linux)系统中PHP的curl函数无法使用的问题
我之前用的Windows的服务器,未出现问题,后来把服务器重装了系统,今天在学微信公众号获取信息的时候,发现curl函数出现了问题...... 解决方法 首先连接上服务器,找到/etc/php/7.0 ...
- PaperReading20200221
CanChen ggchen@mail.ustc.edu.cn Busy... Human-level concept learning through probabilistic program i ...
- java并发之CopyOnWirteArrayList
java并发之CopyOnWirteArrayList CopyOnWirteArrayList的实现 它用了ReentrantLock保证了add,set,remove操作的安全,同时使用volat ...
- 使用input选择本地图片,并且实现预览功能
1.使用input标签选择本地图片文件 用一个盒子来存放预览的图片 2.JS实现预览 首先添加一个input change事件,再用到 URL.createObjectURL() 方法 用来创建 UR ...
- Linux centosVMware 压缩打包介绍、gzip压缩工具、bzip2压缩工具、xz压缩工具。
一.压缩打包介绍 Lnux下常见的压缩文件通常是.tar.gz模式,还有.tar..gz..bz2..zip..tar.bz2..tar.xz. .gz:表示由gzip压缩工具压缩的文件 .bz2:表 ...