vue的路由使用

1). 安装 vue-router

 npm install vue-router --save

2). 新建路由配置

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

src/router/index.js

 1 import Vue from 'vue'
 2 import Router from 'vue-router'
 3 
 4 Vue.use(Router)
 5 
 6 const routes = [
 7   {
 8     path: '/auth/register',
 9     name: 'Register',
10     component: () => import('@/views/auth/Register')
11   }
12 ]
13 
14 const router = new Router({
15   mode: 'history',
16   routes
17 })
18 
19 export default router

3). 引入路由配置

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

src/main.js

 1 import Vue from 'vue'
 2 import App from './App'
 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: { App },
12   template: '<App/>'
13 })

4). 添加 `<router-view>`

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

src/App.vue

1 <template>
2   <div id="wrap">
3     <TheHeader/>
4     <div id="main-container" class="container main-container">
5       <router-view/>
6     </div>
7     <TheFooter/>
8   </div>
9 </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下引入便可；