vue本身并没有提供路由机制，但是官方以插件得形式提供了对路由得支持，可以使用vue脚手架包去创建一个webpack应用，在创建时可以选择支持路由功能，这样创建得webpack应用在根目录下的src文件夹中会有一个router文件夹，文件夹中有一个index.js文件在入口文件main.js中导入router中的index.js文件代码如下

import router from './router'

接下来开始简历路由器模块来配置和绑定相关信息，可以使用new Router去创建一个路由，一个路由就是一个对象，一条路由有三个部分 ： name、path、component分别对应的是 这条路由的命名、路径以及相对应的组件代码如下：

import Vue from 'vue'
import Router from 'vue-router'
//导入相对应的组件 @可以将其看成src的根路径
import HelloWorld from '@/home'
import Login from '@/login'

Vue.use(Router)//将Router加载到Vue实例中

export default new Router({       //创建路由对象
  routes: [
    {
      path: '/',    //默认跳转到HelloWorld组件，可以自己更改
      name: 'HelloWorld',     //路由的名字
      component: HelloWorld    //该路由对应的组件
    },
    {
      path:'/login',    //登陆页的路径
      name:'Login',
      component:Login    //登录页对应的组件
    },    //后续还有其他页面跳转可以继续按照该格式去书写

当中导入的组件可以去掉.vue后缀，因为在webpack中配置了所以可以省略，对实际没有任何的影响

接着就是启动路由器了，在main.js入口文件中启用该路由器具体的代码如下

 1 import Vue from 'vue'
 2 import home from './ho'    //导入默认的组件
 3 import router from './router'     //导入路由模块
 4 
 5 Vue.config.productionTip = false
 6 
 7 /* eslint-disable no-new */
 8 new Vue({
 9   el: '#app',
10   router,      //挂载到跟实例中
11   components: { home },
12   template: '<home/>' 
13 });

接下来将路由匹配到的组件通过<router-view>标签渲染到ho.vue组件中代码如下

<template>
    <div>
        <router-view>  //路由匹配到的组件将会渲染到此标签中

        </router-view>
    </div>
</template>