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