Vue-router+路由守卫+路由配置
//Vue - router 官方
安装
npm install vue-router
安装成功
main.js中录入
import router from 'vue-router'
Vue.use(router);
对所有页面进行拦截配置
如果没有,在src目录下新建router文件,文件中新增index.js,如果有,则直接开始配置
src目录结构
拦截、在router ==> index.js文件使用
//引入router、Vue
import Vue from 'vue';
import Router from 'vue-router';
//引入组件/页面views是我新建用来存放主页面的,components用来单独存放组件,根据个人来引入路径
import login from '@/views/login';
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',//拦截地址 也就是用户在浏览器上输入的请求地址,如果与这个地址相同,就返回给浏览器对应的component
name: '',
component: login,//对应的组件/页面根据头部所引入的组件/页面
hidden: true,
meta: {
requireAuth: true //是否需要验证
}
}, {
path: '/login',
name: '登录',
component: login,
hidden: true,
meta: {
requireAuth: true
}
}, {
path: '/index',
name: '首页',
component: index,
hidden: true,
meta: {
requireAuth: true
},
children:[ //当前页面所需要继续跳转的子页面
{
path: '/sync/index',
name: '系统',
component: syncIndex,
hidden: true,
meta: {
requireAuth: true
},
}
]
},
]})
全局路由守卫
main.js中录入
router.beforeEach((to, from, next) => {
//对跳转的页面进行拦截,作用在判断是否登陆/登陆是否过期/有无权限
//可以分别打印to,from,next看看分别是什么
//判断条件则需要根据自己的情况定义了
})
//修改
new Vue({
router,
render: h => h(App)
}).$mount("#app")
修改App.vue
再次npm run dev 或者 npm run serve,运行成功后浏览器打开预览地址,这是成功后的页面
然后我对登陆页面进行了一些美化