该篇涉及到 children,redirect,props,及动态跳转
嵌套路线之children属性
const RouterView = {
render: (h)=>(h('router-view'))
}
const User = {
template: `<div>
这是User页面组件
</div>`
}
const Article = {
template: `<div>
这是Article页面组件
</div>`
}
const routes = [
{
path: '/home',
name: 'Home',
component: RouterView,
redirect: '/home/user'
children: [
{path: 'user', name: 'User', component: User},
{path: 'article', name: 'Article', component: Article}
]
}
]
const router = new VueRouter({
routes
})
注意,如果要在一个路线内嵌套路线(并且表现为路线内的路线切换),children的path不能带有 / 开头,以它开头的路线就表示相对顶级根路线,在这种情况下
渲染子路线由必须先渲染父路线组件,且父组件必须渲染 router-view 不然无法挂载子路线组件
重定向之redirect
{
redirect: String | Function | Object //(路由信息,可带参数)
}
//Object 例子
{
name: 'someComponent' | path: 'url' //(选择一个)
// 注意 name 和 path 是只有一个可以被匹配,重定向无法传参通过有params和query模式
}
//Function的例子
const redirectFunction = (to) => {
// 方法接收 目标路由 作为参数
// return 重定向的 字符串路径/路径对象
}}
props
{
props: Boolean | Function | Object
}
- 如果 props 被设置为 true,route.params 将会被设置为组件属性
- 如果 props 是一个对象,它会被按原样设置为组件属性。当 props 是静态的时候有用。
- 你可以创建一个函数返回 props
// 对象示例
{
props: { newsletterPopup: false }
}
//注意这个props 你可以想象成 <router-view v-bind="props"> </router-view>
// 也许这样你可能瞬间就对模糊的概念清晰了 props就是传入组件的属性值对象,即使是params和query也是这样
//函数示例
{
props: (route) => ({ q: route.query.q }) //返回一个 props对象如上一条
}
动态跳转
大家可以看到,我区分什么是路线 route/routes,什么是路由 router,路由相当于一个遥控器一样,而路线是执行不同的功能,路由可以控制路线就像遥控器可以控制功能播放那个频道的电视一样
// 怎么用代码形式控制路由切换呢
router.push(location, onComplete?, onAbort?)
router.push(location).then(onComplete).catch(onAbort)
router.replace(location, onComplete?, onAbort?)
router.replace(location).then(onComplete).catch(onAbort)
router.go(n)
router.back()
router.forward()
router.push({
name: '',
query:{},
params: {}
})
标签式的动态匹配
attributes | desc |
---|---|
to | 目标信息 |
tag | 替换成的标签,默认式a标签 |
replace | <router-link :to="{ path: ‘/abc’}" replace></router-link> 模式变化 |
append | 设置 append 属性后,则在当前 (相对) 路径前添加基路径。例如,我们从 /a 导航到一个相对路径 b,如果没有配置 append,则路径为 /b,如果配了,则为 /a/b,具体用法和replace相识 |
active-class | 设置链接激活时使用的 CSS 类名。默认值可以通过路由的构造选项 linkActiveClass 来全局配置 |
exact | 精准匹配,默认是匹配路线包含就激活,但是这个要精准 |
exact-active-class | 配置当链接被精确匹配的时候应该激活的 class。注意默认值也是可以通过路由构造函数选项 linkExactActiveClass 进行全局配置的 |
附录
上一篇:Vue-Router 路线匹配
下一篇: