Vue（Vue-router的使用）

介绍

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

• 嵌套的路由/视图表
• 模块化的、基于组件的路由配置
• 路由参数、查询、通配符
• 基于 Vue.js 过渡系统的视图过渡效果
• 细粒度的导航控制
• 带有自动激活的 CSS class 的链接
• HTML5 历史模式或 hash 模式，在 IE9 中自动降级
• 自定义的滚动条行为

配置

    //...
    mode:'hash',  //两种模式：hash哈希模式  history默认跳转
    routes:[
        {
            path:'/home',
            component:Home
        },
        {
            path:'/about',
            component:About
        }
    ]

命名视图

有时候想同时 (同级) 展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar (侧导航) 和 main (主内容) 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default。

    <router-view name="left" class="left"></router-view>
    <router-view name="right" class="right"></router-view>

一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。确保正确使用 components 配置 (带上 s）

    //...
    routes:[
        {
            path:'/about',
            components:{
               default: About,
               left:leftBox,
               right:rightBox
            }
        }
    ]

<router-link>

组件支持用户在具有路由功能的应用中 (点击) 导航。 通过 to 属性指定目标地址，默认渲染成带有正确链接的 <a> 标签，可以通过配置 tag 属性生成别的标签.。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名。

<router-link to="home" tag="li">Home</router-link>

 <router-link> Props

表示目标路由的链接。当被点击后，内部会立刻把 to 的值传到 router.push()，所以这个值可以是一个字符串或者是描述目标位置的对象。

<router-link :to="{name:'room',params:{id:666},query:{name:'wang'}">room666</router-link>

动态路由

我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 vue-router 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果

    //...
    routes:[
        {
            name:'room',
            path:'/room/:id?',
            component:Room
        },
    ]

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

<div>房间号：{{$route.params.id}}</div>

除了 $route.params 外，$route 对象还提供了其它有用的信息，例如，$route.query (如果 URL 中有查询参数)、$route.hash 等等

重定向

    //...
    routes:[
        {
            path:'*',
            redirect:'/home'  
        }
    ]

它可以是一个方法，重定向返回目标

    //...
    routes:[
        {
            path:'*',
            redirect(to){
               if(to.path=="/") {
                   return '/home'   //重定向首页
               }else{
                   return {path:'/err'}  //错误页面
               }
            }  
        }
    ]

嵌套路由

实际生活中的应用界面，通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件

    //...
    routes:[
        {
            name:'book',
            path:'/book',
            component:Book,
            children:[
                {
                    name:'tools',
                    path:'tools',
                    component:tools
                },
                {
                    name:'one',
                    path:'one',
                    component:one
                },
                {
                    name:'two',
                    path:'two',
                    component:two
                }
            ]
        }
    ]

linkActiveClass 和 linkExactActiveClass 原生类名修改

const router =new VueRouter({
    //...
    linkActiveClass:'active',
    linkExactActiveClass:'exact'
})

导航守卫

正如其名，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。

1. 全局守卫

你可以使用 router.beforeEach 注册一个全局前置守卫

const router = new VueRouter.beforeEach((to, from, next) => {
    //... 判断条件
    next()
})

每个守卫方法接收三个参数：

• to: Route: 即将要进入的目标 路由对象

• from: Route: 当前导航正要离开的路由

• next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数

2. 路由独享的守卫

你可以在路由配置上直接定义 beforeEnter 守卫：

    //...
    routes: [
        {
            path: '/home',
            component: Home,
            meta: {
                index: 0
            },
            beforeEnter(to,from,next){
                console.log(to,from)
                next()
            }
        }
    ]

3. 组件内的守卫 

最后，你可以在路由组件内直接定义以下路由导航守卫：

• beforeRouteEnter
• beforeRouteUpdate 
• beforeRouteLeave

    //...
    beforeRouteEnter (to, from, next) {
        console.log(to,from)
        next(vm => {
            // 通过 `vm` 访问组件实例
        })
    }

 

路由懒加载

当打包构建应用时，Javascript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

let Home = () => import('./components/home.vue')