<div>{{$route.params.id}}</div> const router = new VueRouter({ routes: [{ path: '/user/:id', component: User }] }) router.push({name:'user',params: {id: 123})
<h2>{{$route.params.id}}</h2> <router-view></router-view> const router = new VueRouter({ routes: [{ path: '/user/:id', children: [{ // 當/user/:id path: '', component: UserHome },{ // 當/user/:id/profile path: 'profile', component: UserProfile }] }] })
參數:
1.字符串編程
router.push('home')
2.對象code
router.push({path: 'home'})
3.命名的路由component
router.push({ name: 'user', params: { userId: 123 } })
4.帶查詢參數,變成/register?plan=privaterouter
router.push({ path: 'register', query: { plan: 'private' } })
不會向history添加新紀錄,替換當前的history記錄
點擊<router-link :to="..." replace>等同於調用router.replace(...)
router.go(n)對象
在歷史記錄中向前或向後退多少步 // 前進一步,等同history.forward() router.go(1) // 後退一步 router.go(-1) // 前進3步記錄 router.go(3)
<router-view></router-view> <router-view name="a"></router-view> <router-view name="b"></router-view> const router = new VueRouter({ routes: [{ path: '/', components: { default: Foo, a: Bar, b: Baz } }] })