vue二级路由覆盖父路由
刘耀文的大沙雕
钟意阿满
vue 子路由的选中状态会影响父路由的选中状态吗
在实际项目中我们会碰到多层嵌套的组件组合而成，但是我们如何实现嵌套路由呢？因此我们需要在 VueRouter 的参数中使用 children 配置，这样就可以很好的实现路由嵌套。
index.html，只有一个路由出口。
[html] view plain copy。
<div id="app"> 。
<!-- router-view 路由出口, 路由匹配到的组件将渲染在这里 --> 。
<router-view></router-view> 。
</div>
main.js，路由的重定向，就会在页面一加载的时候，就会将home组件显示出来，因为重定向指向了home组件，redirect的指向与path的必须一致。children里面是子路由，当然子路由里面还可以继续嵌套子路由。
[html] view plain copy。
import Vue from 'vue' 。
import VueRouter from 'vue-router' 。
Vue.use(VueRouter) 。
//引入两个组件
import home from "./home.vue" 。
import game from "./game.vue" 。
//定义路由
const routes = [ 。
{ path: "/", redirect: "/home" },//重定向,指向了home组件 。
{
path: "/home", component: home, 。
children: [ 。
{ path: "/home/game", component: game } 。
]
}
]
//创建路由实例
const router = new VueRouter({routes}) 。
new Vue({
el: '#app', 。
data: {
},
methods: { 。
},
router
})
home.vue，点击显示就会将子路由显示在出来，子路由的出口必须在父路由里面，否则子路由无法显示。
[html] view plain copy。
<template> 。
<div> 。
<h3>首页</h3> 。
<router-link to="/home/game"> 。
<button>显示<tton> 。
</router-link> 。
<router-view></router-view> 。
</div> 。
</template> 。
game.vue
[html] view plain copy。
<template> 。
<h3>游戏</h3> 。
</template> 。
运行后的结果：
点击显示后：
抱起亚轩找小葵
vue-router 中怎么把父路由的参数传递到子路由上
在vue-router中 active-class 只在选中的路由上添加active-class，并不会对其关联的路由链接添加active-class。
{ path: '/messageCenters', component: () => System.import('./personalcenter/MessageCenter.vue') },。
{ path: '/my_opinion', component: () => System.import('./personalcenter/myOpinion.vue') },。
{ path: '/entries',。
name: 'entries',。
component: entries,。
children: [。
{ path: 'my_review', component: my_review },。
{ path: 'review_progress', component: review_progress },。
{ path: '', redirect: 'my_review' }。
]
}
]; //恕我直言，阁下代码没有格式化，是想让我们回答者将重心放在帮你格式化代码上面吗。
首先你要明确一点 ，你所指的父组件对应的Path：'/entries'。
默认你所说的情况为选中其中的第一个子组件，那么当前路由的Path：'/entries/my_review'。
此种情况下路由地址与父路由链接并不匹配，根据文首所说，顾父路由不会被选中。
大圣杰锅是
比如说书籍详情页面携带参数`bookId```````在书籍详情的组件里面提取bookId```exportdefault(){data(){},ready(){console.log(this.$route.params.bookId)//123}}````同时在路由那里这样配置：```"/book/:bookId":{name:"book",component:""}````还有，，，这种问题应该去segmentfault或者stackoverflow。
小韩在追星