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下引入便可;
一辈子很短,努力的做好两件事就好;第一件事是热爱生活,好好的去爱身边的人;第二件事是努力学习,在工作中取得不一样的成绩,实现自己的价值,而不是仅仅为了赚钱;