vue-router是一个单页面的路由器，也就是说所有的跳转都会在这个页面实现。

1、简单的跳转。

①首先要安装vue-router，利用npm进行安装

npm install vue-router或者cnpm install vue-router

②在APP.vue进行引用，<router-link to="/user">user</router-link>  router-link指定路径，to指向所要跳转的url

                                      <router-view></router-view>显示url的内容，也可写成<router-view/>

<template>
  <div id="app">
    <header>
      <router-link to="/about">about</router-link>
      <router-link to="/user">user</router-link>
      <router-link to="/home">导航</router-link>
      <router-view></router-view>
    </header>
  </div>
</template>

②在component文件夹新建about.vue  home.vue文件，按照默认模版

③在router文件夹下新建一个router.js文件，进行配置

引入vue和vue-router，切记要加上Vue.use(VueRouter)

import Vue from 'vue'
import VueRouter from 'vue-router'

引入你新建的about.vue  home.vue文件，配置路由，指定路由和组件之间的关系

const routes = [{
        path: '/home',//指向路径，也就是url
        component: home,//加载的组件
    },
    {
        path: '/about',
        component: about
    },
]

定义router，完整的router.js代码

import Vue from 'vue'
import VueRouter from 'vue-router'

import home from './components/home.vue'
import about from './components/about.vue'
import phone from './components/home/phone.vue'
import computer from './components/home/computer'
const user = { template: '<div>nihao</div>' }
    // const phone = { template: '<div>这是一部华为手机</div>' }
    // const computer = {
    //     template: `
    //   <div>这是一部戴尔电脑
    //     <router-view class="home"></router-view>
    //   </div>
    //   `
    // }

Vue.use(VueRouter)

const routes = [{
        path: '/home',
        component: home,
        children: [{
                path: 'computer',
                component: computer
            },
            {
                path: 'phone',
                component: phone
            }
        ]
    },
    {
        path: '/about',
        component: about
    },
    {
        path: '/user',
        component: user
    }
]

var router = new VueRouter({
    mode: 'history',
    base: __dirname,
    routes
})
export default router

重点或者易错点：export default router这句话要记得加上，不然会报下面的警告

④配置main.js，详细见下面代码

import Vue from 'vue'
import App from './App'
// 引入路由
import router from './router'
// 引入echarts

Vue.config.productionTip = false

new Vue({
    el: '#app',
    router,
    // 注入到根实例中
    components: { App },
    render: h => h(App)
})

2、子路由的跳转

在1的基础，进行子路由的跳转，

①在home文件夹下新建两个vue文件，作为子路由所要展示的内容

②在router中配置子路由，在上一节点的内容加上子路由，利用chilren特性

③在父页面写上

<router-link to="/user">user</router-link> 

<router-view></router-view>

以显示子页面的内容

具体效果：

3、传递参数

①通过路由传参

为每一个路由命名，然后取得路由的名字

②通过绑定to参数的传递

命名路由传递参数需要使用params来传递，这里一定要注意使用params不是query。目标页面接收传递参数时使用params

 特别注意：命名路由这种方式传递的参数，如果在目标页面刷新是会出错的,同时这个参数是虚拟的，而非真实的，也就是说当你再次刷新的时候，页面上是获取不到值的