项目中我们使用router进行路由管理
router文件夹下创建index.js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export const routerMap = [
{ path: '*', redirect: '/404', hidden: true },
{ path: '/', redirect: '/demo', hidden: true },
{
path: '/demo',//访问路径
name: 'demo',
component: () => import('@/views/demo/index.vue'),//访问页面
meta: { title: 'demo' },
hidden: true
}
]
export default new Router({
mode: 'history',
base: '',
routes: routerMap
})
main.js里引入router下的index文件
import router from './router'
new Vue({
router,
store,
render: h => h(App),
}).$mount('#app')
在App.vue里加入
<div id="app">
<router-view/>
</div>
到这里我们已经可以使用router-》index.js里配置的路由来进行跳转了
实际项目中我们会有很多模块,每个模块下面可能有多个页面,为了管理方便也更直观,在router下新建modules文件夹,在里面单独存放每个模块的路由js文件,例如我们建一个exception.js来存放403、404、500这样的报错页面
相应的vue页面也要在views文件夹下新建exception文件存放403、404、500页面
exception.js里写:
const exceptionRouters = [
{
path: '/403',
name: 'Page403',
component: () => import('@/views/exception/403.vue'),
meta: { title: '403' },
hidden: true
},
{
path: '/404',
name: 'Page404',
component: () => import('@/views/exception/404.vue'),
meta: { title: '404' },
hidden: true
},
{
path: '/500',
name: 'Page500',
component: () => import('@/views/exception/500.vue'),
meta: { title: '500' },
hidden: true
}
]
export default exceptionRouters
router->index.js文件改为
import Vue from 'vue'
import Router from 'vue-router'
import exceptionRouters from './modules/exception'
Vue.use(Router)
export const routerMap = [
{
path: '/demo',
name: 'demo',
component: () => import('@/views/demo/index.vue'),
meta: { title: 'demo' },
hidden: true
},
...exceptionRouters
]
export default new Router({
mode: 'history',
base: '/vue-cli3-demo/',//设置这里正式访问路径变为:http://127.0.0.1:8080/vue-cli3-demo/demo
routes: routerMap
})
接下来做路由拦截:在跳转到下一个页面之前我们可能需要做一些操作(判断是否登录状态、页面是否可访问、用户权限等)
router下新建interceptor.js
import router from './index'
import store from './../store'
// 设置白名单
const whiteList = ['/403', '/404', '/500']
// 截取参数
function getQueryString(name) {
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i')
var r = window.location.search.substr(1).match(reg)
if (r !== null) return unescape(r[2]); return null
}
// 路由拦截
router.beforeEach((to, from, next) => {
if (whiteList.indexOf(to.path) !== -1) { // 检测是否为白名单
next()
} else {
// 是否是登陆状态-单点登录请求用户是否登录接口-》后台返回登陆页面地址或者已登陆的状态
// 这里看具体项目中如何判断当前是否登录状态(我们之前的项目是发送token到接口返回登录状态),这里我们暂用下面的方式
// 除了登录还可以做其他操作,具体看项目需要
if (!store.getters.isLogin) {// 未登陆
next('/login')
} else {
if (to.path === '/login' || to.path === '/') {
next('/index')
} else {
next()
}
}
}
})
mian.js文件引入interceptor.js
import './router/interceptor'