安装 vue-route & 配置 & 使用
2018年11月14日1.安装vue-route
如果默认安装的时候已经安装vue-route,可以跳过 第一步, 第二步, 第三步,直接看4和5如何使用
1 |
npm install vue-router --save |
2.新建路由配置
创建src/router/index.js
文件,开始配置
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
import Vue from 'vue' //引入vue import Router from 'vue-router' //引入路由组件 import routes from './routes' Vue.use(Router) //vue使用router组件 /** * 新建一个路由 * @type {VueRouter} */ const router = new Router({ mode: 'history', routes }) /** * 设置出口和返回的数据 */ export default router |
创建src/router/routes.js
文件,开始配置 (这里使用routes命名文件适用与vue2.0,vue3.0请使用routearr,或者其他命名,如果使用routes报错)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
/** * 路由配置的地方 * @type {*[]} */ export default [ //注册路由配置 { path : '/auth/register', name : 'Register', component : () => import('@/views/auth/Register') }, // 其他未配置的路由都跳转到首页 { path : '*', redirect : '/' // 重定向 } ] |
3.全局注册,路由配置组件
打开文件src/main.vue
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import Vue from 'vue' //引入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.添加路由标签
打开文件src/App.vue
1 2 3 4 5 6 7 |
. . . <router-view/> . . . |
5.如何跳转到该路由
1 2 3 |
<router-link to="/auth/register" class="btn btn-default login-btn"> 注册 </router-link> |