路由配置
router下的index.js中配置
方式一
import Vue from 'vue'
import Router from 'vue-router'
import space from '@/views/space'
import detail from '@/views/detail'
import admin from '@/views/admin'
import login from '@/views/login'
Vue.use(Router)
export default new Router({
mode:"history",
routes: [
{
path: '/',
name: 'space',
component: space,
meta: {
title: '空间页'
}
},
{
path:'/space',
name: 'space',
component: space,
meta: {
title: '空间页'
}
},
{
path: '/space/detail_show/:article_id',
name: 'detail',
component: detail
},
{
path: '/admin',
name: 'admin',
component: admin
},
{
path: '/login',
name: 'login',
component: login
},
]
})
方式二
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const router = new Router({
mode: 'history',
routes: [
{
path: '/login',
component: resolve => require(['@/components/login/login.vue'], resolve),
meta: {
title: '登陆', keepAlive: false
}
},
{
path: '/',
redirect: '/index', keepAlive: false
},
{
path: '/PaintedEgg',
component: resolve => require(['@/components/common/paintedEgg.vue'], resolve),
meta: {
title: '彩蛋', keepAlive: false
}
},
{
path: '/',
component: resolve => require(['@/components/common/home.vue'], resolve),
meta: {
title: '全局文件' },
children: [
{
path: '/index',
name:'index',
component: resolve => require(['@/views/index.vue'], resolve),
meta: {
title: '系统首页', keepAlive: false
}
},
{
path:'introduction',
name:'introduction',
component:resolve => require(['@/views/introduction.vue'], resolve),
meta: {
title: '查看简介', keepAlive: false
}
},
{
path:'/newsCheck',
name:"newsCheck",
component: resolve => require(['@/views/newsCheck.vue'],resolve),
meta: {
title: '查看新闻', keepAlive: false
}
},
{
path:'/newsAdd',
name:"newsAdd",
component: resolve => require(['@/views/newsAdd.vue'],resolve),
meta: {
title: '添加新闻', keepAlive: false
}
},
{
path:'/newsCheck:id=:news_id',
name:"newsCheckDetail",
component: resolve => require(['@/views/newsCheckDetail.vue'],resolve),
meta: {
title: "新闻详情页", keepAlive: false
}
}
]
},
{
path: '*',
component: resolve => require(['@/views/404.vue'], resolve),
meta: {
title: '404'
}
}
]
})
export default router;
vue中keepAlive的使用
在开发中经常有从列表跳到详情页，然后返回详情页的时候需要缓存列表页的状态（比如滚动位置信息），这个时候就需要保存状态，要缓存状态；vue里提供了keep-alive组件用来缓存状态。
路由导航守卫
如果用户没有登陆，但是直接通过url访问特定界面，需要重新导航到登陆界面
一般放在路由页面
//router路由封装
import Vue from 'vue'
import Router from 'vue-router'
import Login from ''
import Home from ''
Vue.use(Router)
const router = new Router({
routes:[
{
path:'/' , redirect:'/login'},
{
path:'/login' , component: Login},
{
path:'/home' , component: Home}
]
})
//挂载路由导航守卫
router.beforeEach((to , from , next) => {
//to表示将要访问的路径
//from代表从哪个路径跳转而来
//next是一个函数，表示放行
//next()放行 next('/login')强制跳转
if(to.path === 'login') return next();
//获取token
const tokenStr = window.sessionStorage.getItem（’token
//没有token，强制跳转到登录页
if(!tokenStr) return next('login')
next()
})
export default router
详细介绍请看官方文档 vue-router前端路由导航守卫