vue的路由使用

1). 安装 vue-router

 npm install vue-router --save

2). 新建路由配置

安装成功后，在 src 新建 router 文件夹，然后新建 index.js 文件，复制贴入以下代码：

src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const routes = [
  {
    path: '/auth/register',
    name: 'Register',
    component: () => import('@/views/auth/Register')
  }
]

const router = new Router({
  mode: 'history',
  routes
})

export default router

3). 引入路由配置

打开 src/main.js 文件，复制贴入以下代码：

src/main.js

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

4). 添加 <router-view>

打开 src/App.vue 文件，复制以下代码替换原 <template>：

src/App.vue

<template>
  <div id="wrap">
    <TheHeader/>
    <div id="main-container" class="container main-container">
      <router-view/>
    </div>
    <TheFooter/>
  </div>
</template>

5). 添加 <router-link>

打开 src/components/layouts/TheEntry.vue 文件，将注册链接用 <router-link> 替换：

src/components/layouts/TheEntry.vue

<!-- 修改 -->
<a href="#" class="btn btn-default login-btn">
  <i class="fa fa-user-plus"></i> 注 册
</a>
<!-- 为 -->
<router-link to="/auth/register" class="btn btn-default login-btn">
  <i class="fa fa-user-plus"></i> 注 册
</router-link>

 6.由于routes的配置项比较多，因此为了方便管理，将routes配置文件移动到route下的新建routes.js中，并export default导出；并在route/index.js下引入便可；