[笔记]《Vue移动开发实战技巧》- Vue-router使用

一、动态路由匹配

动态路由匹配指的是把某种模式的路由，全都映射到同一组件。

const User = {
    template: '<div>User</div>'
}
const router = new VueRouter({
    routes: [{
        //动态路径参数，以:开头
        {path: '/user/:id', component: User}
    }]
})

一个路径参数使用:标记。但匹配到一个路由时，参数值会被设置到this.$route.params，可以在每个组件内使用。我们可以更新User的模板，输出当前用户的ID：

const User = {
    template: '<div>User {{ $route.params.id }}</div>
}

在一个路由中可以设置多段路径参数，对应的值都会设置到$route.params里。

1 响应路由参数的变化

复用组件时，想对路由参数做出响应的话，你可以简单地watch（检测变化）$route对象。

const User = {
    template: '...',
    watch: {
        '$route' (to, from) {
            // 对路由变化做出响应...
        }
    }
}

2 高级匹配模式

Vue-router使用path-to-regexp作为路径匹配引擎，所以支持很多高级的匹配模式，例如：可选的动态路径参数、匹配零个或多个、一个或多个，甚至是自定义正则匹配。

3 匹配优先级

嵌套路由配置，可以表达URL中各段动态路径也按某种结构对应嵌套的各层组件。

const router = new VueRouter({
    routes: [
        { path: '/user/:id', component: User,
            children: [
                {
                    // 当/user/:id/profile匹配成功，
                    // UserProfile会被渲染在User的<router-view>中
                    path: 'profile',
                    component: UserProfile
                },
                {
                    // 当/user/:id/posts匹配成功
                    // UserPosts会被渲染在User的<router-view>中
                    path: 'posts',
                    components: UserPosts
                }
            ]
        }
    ]
})

二、编程式导航

我们可以借助router的方法，通过编写代码来实现router.push(location)，这个方法会向history栈中添加一个新记录。

声明式：

<router-link :to="">

编程式：

router.push(...)

替换掉当前的history记录的方法。

声明式：

<router-link :to="..." replace>

编程式：

router.replace(...)
router.go(n)

三、命名视图

同级展示多个视图。可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果router-view没有设置名字，那么默认为default。

<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>

const router = new VueRouter({
    routes: [
        {
            path: '/',
            components: {
                default: Foo,
                a: Bar,
                b: Baz
            }
        }
    ]
})

四、重定向和别名

1 重定向

const router = new VueRouter({
    routes: [
        { path: '/a', redirect: '/b' }
    ]
})

重定向的目标也可以是一个命名的路由：

const router = new VueRouter({
    routes: [
        { path: '/a', redirect: { name: 'foo' }}
    ]
})

甚至是一个方法，动态返回重定向目标：

const router = new VueRouter({
    routes: [
        { path: '/a', redirect: to => {
            // 方法接收目标路由作为参数
            // reture 重定向的字符串路径/路径对象
        }
    ]
})

2 别名

别名的意思就是，/a的别名是/b，意味着，当用户访问/b时，URL会保持为/b，但是路由匹配则为/a，就像用户访问/a一样。

const router = new VueRouter({
    routes: [
        { path: '/a', component: A, alias: '/b' }
    ]
})

五、导航钩子

Vue-router提供的导航钩子主要用来拦截导航，让它完成跳转或取消。有多种方式可以在路由导航发生时执行钩子：全局的、单个路由独享的，或者组件级的。

1 全局钩子

你可以使用router.beforeEach注册一个全局的before钩子。

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
    // ...
}

当一个导航触发时，全局的before钩子按照创建顺序调用。钩子是异步解析执行，此时导航在所有钩子resolve完之前一直处于等待中。每个钩子方法接受三个参数:

to: Route：即将要进入的目标，路由对象。
from: Route：当导航正要离开的路由。
next: Function：一定要调用该方法来resolve这个钩子。执行效果依赖next方法的调用参数。

next()：进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是confirmed（确认的）。

next(false)：中断当前的导航。如果浏览器的URL改变了（可能是用户手动或者浏览器后退按钮），那么URL地址会重置到from路由对应的地址。

next('/')或者next({ path: '/' })：跳转到一个不同的地址。当前的导航中断，然后进行一个新的导航。

确保要调用next方法，否则钩子就不会被resolved。同样可以主次一个全局的after钩子，不过它不像before钩子那样，after钩子没有next方法，不能改变导航。

router.afterEach(router => {
    // ...
})

2 某个路由独享的钩子

const router = new VueRouter({
    routes: [
        {
            path: '/foo',
            component: Foo,
            beforeEnter: (to, from, next) => {
                // ...
            }
        }
    ]
})

3 组件内的钩子

你可以直接在路由组件内直接定义一下钩子：

beforeRouteEnter，beforeRouteUpdate，beforeRouteLeave

const Foo = {
    template: `...`,
    beforeRouteEnter (to, from, next) {
        // 在渲染该组件的对应路由被confirm前调用
        // 不能获取组件示例`this`
        // 因为当钩子执行前，组件实例还没被创建
    },
    beforeRouteUpdate (to, from, next) {
        // 在当前路由改变，但是该组件被复用时调用
        // 举例来说，对于一个带有动态参数的路径/foo/:id，在/foo/1和/foo/2之间跳转的时候，
        // 由于会渲染同样的Foo组件，因此组件示例会被复用。而这个钩子就会在这个情况下被调用。
        // 可以访问组件实例`this`
    },
    beforeRouteLeave (to, from, next) {
        // 导航离开该组件的对应路由时调用
        // 可以访问组件实例`this`
    }
}