一、基础
一、动态路由匹配
$route.params 动态路由参数
$route.query
$route.hash
模式 | 匹配路径 | $route.params |
---|---|---|
/user/:username | /user/evan |
|
/user/:username/post/:post_id | /user/evan/post/123 |
|
二、嵌套路由
children
以 /
开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径(可使用空路由)
const router = new VueRouter({
routes: [复制代码
{ path: '/user/:id', component: User,
children: [复制代码
{复制代码
// 当 /user/:id 匹配成功,// UserHome 会被渲染在 User 的 <router-view> 中
{ path: '', component: UserHome }, 复制代码
},复制代码
{
// 当 /user/:id/profile 匹配成功,// UserProfile 会被渲染在 User 的 <router-view> 中
path: 'profile',
component: UserProfile
},
{
// 当 /user/:id/posts 匹配成功// UserPosts 会被渲染在 User 的 <router-view> 中
path: 'posts',
component: UserPosts
}
]
}
]
})复制代码
三、路由导航方式
router.push --
window.history.pushState
、router.replace -- 、
window.history.replaceState
router.go --
window.history.go
四、具名路径
定义路由时,可以加上相应的名字,方便进行路径的跳转(v-link, router.go都可以用到)
router.map({ '/user/:userId': { name:'user', // 给这条路径加上一个名字 component: { ... } } })复制代码
<av-link="{ name: 'user', params: { userId: 123 }}">User</a>复制代码
router.go({ name:'user', params: { userId:123 }})复制代码
v-ref子组件定义的索引,父组件可根据该值快速找到子组件,v-ref不支持驼峰命名规则。