文件目录：

 

编辑router文件夹下的index.js文件

· 第一步：引用vue和vue-router ，Vue.use（VueRouter）

/* eslint-disable*/
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

·第二步：引用定义好的路由组件

import ChildOne from '../components/childOne'
import ChildTwo from '../components/childTwo'

 

·第三步：定义路由（路由对象包含路由名、路径、组件、参数、子路由等），每一个路由映射到一个组件

·第四步：通过new Router来创建router实例

export default new Router({
    routes: [
    {
        path: '/one',
        name: 'ChildOne',
        component: ChildOne
    },
    {
        path: '/two',
        name: 'ChildTwo',
        component: ChildTwo
    }
    ]
})

 

在main.js文件上编辑

·第五步：在main.js中将路由实例挂载到vue根实例上，使得整个应用都有路由功能，如下

import router from '../src/router/index.js'
new Vue({
    el: '#app',
    router,
    components: { App },
    template: '<App/>'
})

 

在组件文件上使用路由，编辑app.vue

·第六步：在组件中使用router-link 标签实现跳转路由、使用router-view来实现路由显示，如下

<template>
    <div id="app">
        <div><img src="./assets/logo.png"></div>
        <router-link to="/one">显示第一个页面</router-link>
        <router-link to="/two">显示第二个页面</router-link>
        <router-view></router-view>
    </div>
</template>

该demo中的childOne.vue组件文件

<template>
    <div style="border:1px solid blue;color:blue">
        <p>这是子组件1的内容!!!</p>
        <p>!!!这是第1个路由的页面!!!</p>
    </div>
</template>

childTwo.vue组件文件

<template>
    <div style="border:1px solid blue;color:blue">
        <p>这是子组件2的内容</p>
        <p>这是第二个路由显示的页面怎么样</p>
    </div>
</template>

注意：在组件中可以使用this.$router访问路由器，可以使用this.$route访问当前路由；

实现效果：

 

路由嵌套：

使用方法：在router/index.js中定义路由对象时，使用children:[{...},{...}]的形式设置下级路由及映射组件，如下在one路由下设置了log和reg路由

export default new Router({
  routes: [
    {
      path: '/one',
      name: 'ChildOne',
      component: ChildOne,
      children:[
        {
          path:'log',
          component:Log,
        },
        {
          path:'reg',
          component:Reg,
        },
      ],
    },
    {
      path: '/two',
      name: 'ChildTwo',
      component: ChildTwo
    }
  ]
})

childOne.vue中使用二级路由

<template>
  <div style="border:1px solid red;color:red;">
    <p>这是子组件1的内容</p>
    <p>下面开始点击显示嵌套的子路由 </p>
    <router-link to="/one/log">显示登录页面</router-link>
    <router-link to="/one/reg">显示注册页面</router-link>
    <router-view></router-view>
  </div>
</template>