Vue-router安装与使用+路由守卫+路由配置

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，运行成功后浏览器打开预览地址，这是成功后的页面

然后我对登陆页面进行了一些美化