一、路由使用

// 导入路由组件
import VueRouter from 'vue-router'

// 导入路由配置文件
import routerConfig from './routerConfig.js'

// 注册路由
Vue.use(VueRouter)

// 创建路由
const router = new VueRouter({
  routes: routerConfig
})

// 实例化根组件，并绑定路由
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

提示：导入路由和导入其他的插件一样，导入都必须先用 Vue 注册，才能够使用。

二、路由配置

这里是返回一个路由配置数组，供路由使用。以下写法使用了路由的懒加载，只有当路由访问的时候才加载对应的组件，这样可以更高效，而不会打包出一个巨大的入口文件。其他详细的使用方式，请访问插件官网

export default [
  {
    path: '/',
    component: resolve => require(['./views/index.vue'], resolve)
  },
  {
    path: '/register',
    component: resolve => require(['./views/register.vue'], resolve)
  },
  {
    path: '/login',
    component: resolve => require(['./views/login.vue'], resolve)
  }
]

三、路由访问

现在可以直接访问 /login 等页面了，也可以在页面中点击跳转。这里有个跟1.0不同的是，链接使用 router-link 而不是 a，a作为实体外链的时候用

<template>
  <div id="app">
    <router-link to="/">首页</router-link>
    <router-link to="/register">注册</router-link>
    <router-link to="/login">登录</router-link>
    <router-view></router-view>
  </div>
</template>