vue router 學習

動態路由匹配

<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
        }]
    }]
})

編程式導航

router.push()

參數：
1.字符串

router.push('home')

2.對象

router.push({path: 'home'})

3.命名的路由

router.push({
    name: 'user',
    params: {
        userId: 123
    }
})

4.帶查詢參數，變成/register?plan=private

router.push({
    path: 'register',
    query: {
        plan: 'private'
    }
})

router.replace()

不會向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
        }
    }]
})