vue-router （持续更新中）

vue-router是单独的第三方插件，须要单独安装。 vue的设计就是这样。 vue-router 和 vuex 是做为第三方插件，存在的。

1.vue-router入门

安装vue-router vue-router是一个插件包，因此咱们仍是须要用npm来进行安装的。打开命令行工具，进入你的项目目录，输入下面命令。

npm install vue-router --save-dev
复制代码

若是你安装很慢，也能够用 cnpm 进行安装，若是你在使用 vue-cli 中已经选择安装了 vue-router ，那这里不须要重复安装了。

(1) 解读 src/router/index.js 文件 咱们用 vue-cli 生产了咱们的项目结构，你能够在 src/router/index.js 文件，这个文件就是路由的核心文件，咱们先解读一下它。

import Vue from 'vue'                    // 引入Vue
import Router from 'vue-router'          // 引入vue-router
import Hello from '@/components/Hello'   // 引入根目录下的Hello.vue组件

Vue.use(Router)          // Vue全局使用Router

export default new Router({
    routes: [                   // 配置路由，这里是一个数组
        {                       // 每个连接都是一个对象
            path: '/',          // 连接路径
            name: 'Hello',      // 路由名称
            components: Hello   // 对应的组件模板
        }
    ]
})
复制代码

增长一个Hi的路由和页面：

import Hi from '@/components/Hi'
export default new Router({
    routes: [
        {
            path:'/',
            name: 'Hello',
            component: Hello
        }, {
            path: '/hi',
            name: 'Hi',
            component: Hi
        }
    ]
})
复制代码

2.在组件中使用

vue-router一共有两个：

<router-link>  
<router-view>  
复制代码

咱们须要在页面上设置导航连接，咱们只要点击就能够实现页面内容的变化。制做连接须要 <router-link>标签，咱们先来看一下它的语法。

<router-link to="/">首页</router-link>
复制代码

明白了 <router-link>的基本语法，咱们在 src/App.vue 文件中的template里加入下面代码，实现导航。

<p>导航：
    <router-link to="/">首页</router-link>
    <router-link to="/hi">Hi页面</router-link>
</p>
复制代码

3.vue-router配置子路由

咱们这节课学习一会儿路由的路由方式，也叫子路由。
子路由的状况通常用在一个页面有他的基础模板，然而它下面的页面都隶属于这个模板，只是改变部分样式。

(1) 改造App.vue的导航代码

App.vue代码：

<p>导航：
    <router-link to="/">首页</router-link> |
    <router-link to="/hi">Hi页面</router-link> |
    <router-link to="/hi/hi1">-Hi页面 1</router-link> |
    <router-link to="/hi/hi2">-Hi页面 2</router-link>
</p>
复制代码

(2) 改写 components/Hi.vue 页面 把 Hi.vue 改为一个通用的模板，加入 <router-view>标签，给子模板提供插入位置。
"Hi 页面 1" 和 "Hi 页面 2" 都至关于 "Hi 页面"的子页面，有点像继承关系。 咱们在"Hi页面"里加入 <router-view> 标签。 components/hi.vue 代码：

<template>
    <div class="hello">
        <router-view class="aaa"></router-view>
    </div>
</template>
复制代码

(3) 修改 src/router/index.js 代码：

import Hi from '@/components/Hi'
import Hi1 from '@/components/Hi1'
import Hi2 from '@/components/Hi2'
export default new Router({
    routes: [
        {
            path: '/',
            name: 'Hello',
            component: Hello
        }, {
            path: '/hi',
            component: Hi,
            children: [
                {path: '/', component: Hi},
                {path: 'hi1', component: Hi1},
                {path: 'hi2', component: Hi2}
            ]
        }
    ]
})
复制代码

4.vue-router如何参数传递

开发中，参数的传递是个最基本的业务需求。 点击导航菜单时，跳转页面上能显示出当前页面的路径，来告诉用户你想在所看的页面位置（相似于面包屑导航）。 (1) 用name传递参数 两步完成用name传值并显示在模板里： 在路由文件 src/router/index.js 里配置 name 属性。

routes: [
    {
        path: '/',
        name: 'Hello',
        component: Hello
    }
]
复制代码

模板里 （src/App.vue) 用 $route.name 的形式接收，好比直接在组件中显示：

<p>{{ $route.name }} </p>
复制代码

(2) 经过 <router-link>标签中的 to 传参 其实咱们多数传参是不用name进行传参的，咱们用<router-link>标签中的to属性进行传参，须要你注意的是这里的to要进行一个绑定，写成:to。先来看一下这种传参方法的基本语法。

<router-link :to="{name:xxx, params: {key:value}}">valueString</router-link>
复制代码

这里的to前边是带冒号的，而后后边跟的是一个对象形式的字符串。 咱们改造一下咱们的src/App.vue里的<router-link>标签，咱们把hi1页面的<router-link>进行修改。

<router-link :to="{name:'hi1', params:{username:'jspang'}}">Hi页面1</router-link>
复制代码

把src/router/index.js文件里给hi1配置的路由起个name，就叫hi1

{path:'/hi1',name:'hi1', component:Hi1},
复制代码

最后在模板里(src/components/Hi1.vue)用$route.params.username进行接收。

{{$route.params.username}}
复制代码

5.单页面多路由区域操做

例如咱们在src/App.vue里加上两个<router-view>标签。咱们用vue-cli创建新的项目，而且打开了src目录下的App.vue文件，在<router-view>下面新写了两行<router-view>标签，并加入了些CSS样式。

<router-view ></router-view>
<router-view name="left" style="float:left;width:50%; height:300px;"></router-view>
<router-view name="right" style="float:right;width:50%; height:300px;"></router-view
复制代码

如今的页面中有了三个<router-view>标签，也就是说咱们须要在路由里配置这三个区域，配置主要是在components字段里进行。

import Vue from  ‘vue’
import Router from 'vue-router'
import Hello from '@/components/Hello'
import Hi1 from '@/components/Hi1'
import Hi2 from '@/components/Hi2'
 
Vue.use(Router)
 
export default new Router({
  routes: [
    {
      path: '/',
      components: {
        default:Hello,
        left:Hi1,
        right:Hi2
      }
    },{
      path: '/Hi',
      components: {
        default:Hello,
        left:Hi2,
        right:Hi1
      }
    }
 
  ]
})
复制代码

最后在App.vue中配置咱们的<router-link>就能够了。

<router-link to=”/”>首页</router-link> |
<router-link to=”/hi”>Hi首页</router-link> |
复制代码

6.vue-router利用url传递参数

总结：在组件中常见用法

this.$route.path      //   

this.$router.push()        // 
复制代码

vue-router 源码解析