1. Vue Router简介与安装

1.1 Vue Router简介

　　Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，构建单页面应用。

　　Vue Router支持3种路由模式：

　　　　◊ hash：使用URL hash值作为路由，HTML5 History API出现之前，前端路由都通过hash来实现。hash实现需要在URL中加上#，Web服务不会解析hash，自动忽略#后面的内容，JavaScript通过window.location.hash读取解析。

　　　　◊ history：依赖HTML5 History API和服务器配置

　　　　◊ abstract：支持所有JavaScript运行环境，如node服务器端。如果发现没有浏览器的API，路由就会强制进入该模式。

　　vue-router提供两个指令标签组件来处理这个导航与自动渲染逻辑：

　　　　◊ <router-view>：渲染路径匹配到的组件视图

　　　　◊ <router-link>：支持用户在具有路由功能的应用中导航

1.2 Vue Router安装

　　Vue Router官方网址：

　　Vue Router文档教程：

　　npm安装VueRouter：

npm install vue-router

2. 起步示例

2.1 单个html页面中使用

    
          
                      
      
        
       
            
        
                
         
          Home
                     
            
        
                
         
          About
                     
        
       
        
           
      
    
          
          

2.2 vue-cli中模块化使用

　　（1）创建基于vue-cli项目

$ vue init webpack libing.vue

　　（2）/src/views中新建Home.vue及About.vue

　　（3）/src/route/index.js

import Vue from 'vue'import Router from 'vue-router'import Home from '@/views/Home'import About from '@/views/About'Vue.use(Router)export default new Router({    routes: [{            path: '/',            name: 'home',            component: Home        },        {            path: '/home',            name: 'home',            component: Home        },        {            path: '/about',            name: 'about',            component: About        }    ]})

　　（4）/src/App.vue

　　在router-link通过名称引用路由：向to属性传入一个对象显式的声明路由的名称。

     
      Home
     

注：在/src/route/index.js中配置路由路径时，创建Router 对象new Router({})，如果不配置 mode，就会使用默认的 hash 模式，该模式下会将路径格式化为 #! 开头。

      设置 mode: "history" 将使用 HTML5 history 模式，该模式下没有 # 前缀，而且可以使用 pushState 和 replaceState 来管理记录。

import Vue from 'vue'import Router from 'vue-router'import Home from '@/views/Home'import About from '@/views/About'Vue.use(Router)export default new Router({    mode: 'history',    routes: [{            path: '/',            name: 'home',            component: Home        },        {            path: '/home',            name: 'home',            component: Home        },        {            path: '/about',            name: 'about',            component: About        }    ]})

3. 动态路由匹配

　　在 vue-router 的路由路径中使用“动态路径参数”(dynamic segment) ，动态部分 以 : 开头。

　　/src/router/index.js

import Vue from 'vue'import Router from 'vue-router'import Home from '@/views/Home'import About from '@/views/About'import User from '@/views/User'Vue.use(Router)export default new Router({    mode: 'history',    routes: [{            path: '/',            component: Home        },        {            path: '/home',            component: Home        },        {            path: '/about',            component: About        },        {            // 动态路径参数 以冒号开头            path: '/user/:id',            component: User        }    ]})

　　User.vue：

　　App.vue：

　　在User.vue中直接通过 {

{ $route.params.id }} 获取路由中路径参数值。

　　当整个vue-router 注入到根实例后，在组件的内部，可以通过this.$route 来获取到 router 实例。

　　$route中params 属性来获得动态部分，params 属性是一个对象。

　　属性名是路径中定义的动态部分 id, 属性值是router-link中to 属性中的动态部分。

 

　　在<router-link>中加入一个params的属性来指定具体的参数值。

     
      UserID:1
     

4. 嵌套路由

　　实际应用界面，通常由多层嵌套的组件组合而成。

　　vue-router配置嵌套路示例：

　　App.vue

　　这里的<router-view>是最顶层的出口，渲染最高级路由匹配到的组件。

　　一个被渲染组件同样可以包含自己的嵌套 <router-view>。

　　User.vue

　　要在嵌套的出口中渲染组件，需要在 VueRouter 的参数中使用 children 配置：

　　index.js

import Vue from 'vue'import Router from 'vue-router'import Home from '@/views/Home'import About from '@/views/About'import User from '@/views/User'import UserProfile from '@/views/UserProfile'Vue.use(Router)export default new Router({    mode: 'history',    routes: [{            path: '/',            name: 'home',            component: Home        },        {            path: '/home',            name: 'home',            component: Home        },        {            path: '/about',            name: 'about',            component: About        },        {            // 动态路径参数 以冒号开头            path: '/user/:id',            name: 'user',            component: User,            children: [{                // 当 /user/:id/profile 匹配成功，                // UserProfile 会被渲染在 User 的 
     
       中                path: 'profile',                name: 'profile',                component: UserProfile            }]        }    ]})
     

　　UserProfile.vue

　　访问嵌套路由方式：http://localhost:8080/user/1/profile

　　在嵌套路由中访问父级路由参数：

　　当访问 /user/1 时，提供一个 空的子路由。

{    // 动态路径参数 以冒号开头    path: '/user/:id',    name: 'user',    component: User,    children: [{        // 当 /user/:id 匹配成功，        // UserProfile 会被渲染在 User 的 
     
       中        path: '',        component: UserProfile    }, {        // 当 /user/:id/profile 匹配成功，        // UserProfile 会被渲染在 User 的 
      
        中        path: 'profile',        name: 'profile',        component: UserProfile    }]}
      
     

5. 命名视图

　　若要同级展示多个视图（非嵌套），使用命名视图。

　　如果router-view没有设置名字，则默认为 default。

　　一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。使用 components 配置。

　　Route配置：

export default new Router({    routes: [{            path: '/',            name: 'home',            components: {                default: Home,                header: Header,                slidebar: SlideBar,                footer: Footer            }        }    ]})

　　命名嵌套视图：

export default new Router({    routes: [{            // 动态路径参数 以冒号开头            path: '/user/:id',            name: 'user',            component: User,            children: [{                // 当 /user/:id 匹配成功，                // UserProfile 会被渲染在 User 的 
     
       中                path: '',                component: UserProfile            }, {                // 当 /user/:id/profile 匹配成功，                // UserProfile 会被渲染在 User 的 
      
        中                path: 'profile',                name: 'profile',                components: {                    default: UserProfile,                    defined: UserDefinedProfile                }            }]        }    ]})