前端学习——路由

由于vue是SPA(单页面)应用，所以只有一个html文件，而其多页面的功能就是通过路由组件实现的，路由组件根据不同的路由——也就是路径，每个路由组件就相当于一个页面。

由于路由配置参数都是固定的，所以当需要在路由中自定义一些使用参数时就可以通过路由元信息进行处理，既meta字段，可以放一些自定义的参数。

路由分类

vue有多种类型的路由，有静态路由，动态路由，嵌套路由，命名路由，和编程式路由。

不同的路由用来实现不同的功能，比如静态路由就是最普通的一种路由方式，根据路径展示不同的组件。

routes: [
    {
    path: '/', //静态组件
    name: 'home', //命名路由
    component: '组件名',
    children: [
        {
            path: '/order', //嵌套路由，也就是多集路由
            name: 'order',
            component: '订单组件'
        }
       ]
    },
    {
        path: '/user/:id', //动态组件
        name: 'user',
        component: '用户组件'
    }
]

而动态路由就可以在功能相同的组件中，根据不同的路由参数来显示不同的数据。

vue路由使用<route-link to=''/>标签进行路由跳转，也就是a标签，但如果在不能使用a标签的情况下就可以使用编程式路由，也就是使用$router.push(path)， $router.replace(path)，进行路由跳转。

路由传参

vue路由传参有多种方式，其中动态路由传参，query传参，params传参和 props传参，而其又各有两种实现方式，一种是使用<router-link/>实现，另一种是使用编程式路由实现。

query传参

http://localhost:8080/user?id=123&name=张三   这个就是典型的query传参

params传参

props传参

路由守卫 

路由守卫是判断路由是否能够被访问，有前置路由守卫和后置路由守卫

路由缓存

比如路由页面中有表单编辑，编辑之后切换到其它组件，这时表单组件会被销毁，再次切换回来表单数据就不在了，所以需要缓存路由组件，这样切换路由组件时就不会被销毁。

include中是被缓存的组件，可以使用 :include=['组件名', '组件名']缓存多个组件, 

tips： include 中是组件名称，不是路由名称