1.一个组件中包含子路由,就会出现路由嵌套。
这时就需要给子路由配置路径。子路由的路径可以直接写最终路径,其上级路径都会根据其父路径相对应补全。路由中redirect的值规定了默认显示的子路由路径。
{
path: '/hello',
name: 'HelloWorld',
component: HelloWorld,
redirect:'/hello/java',
children:[{
path:'java',
name:'java',
component:java
},{
path:'web',
name:'web',
component:web
},{
path:'php',
name:'php',
component:php
}
]
}
**2.路由传参
1.直接在配置路由路径后添加参数(传入两个参数名,count和name)
{
path: '/index/:count/:name',
name: 'index',
component: index
}
组件中给当前路径中的参数赋值
<!--传递参数-->
<li><router-link :to="{name:'index',params:{count:2}}">index</router-link></li>
若需在当前组件中获取传入的参数值。
{{ $route.params.count }}
2.另一种传参形式(/index?count=2...)
路由配置中:
{
path: '/home',
name: 'home',
props:(route)=>({
query:route.query.count
}),
component: home
}
组件当中:
<li><router-link :to="{name:'home',query:{count:2}}">home</router-link></li>
若需在当前组件中获取传入的参数值。
{{ $route.query.count }}
获取路由地址
this.$route.path