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下引入便可；