Vue meta属性 路由元信息前后配置守卫

• 它可以切换不同页面显示不同的页面标题文字,也可以判断守卫放行的页面,下面一一解释

{
                path: '/',
                name: '',
                meta: {
                    title: '后台管理主页',
                    isRelease: true,

                },
                component: () =>
                    import ('../views/main/index.vue')
            },
            {
                path: '/userList',
                name: '',
                meta: {
                    title: '用户列表',
                    isRelease: true,
                },
                component: () =>
                    import ('../views/main/userList.vue')
            }

全局页面守卫(router/index.js)

早于create 他里面没有this 可以传vm来访问this

// 在路由元信息配置守卫 isRelease为true, 适合守卫多个页面 vue3next() 变成return true
router.beforeEach((to, from, next) => {
    if (localStorage.getItem('token')) {
        next()
    } else {
        if (to.meta.isRelease) { //没有token isRelease为true 守卫不让进,跳入login
            next('/login')
        } else {
            next()
        }
    }

})

不同页面展示不同文字(router/index.js)

它里面没有next,它是最后一步 它是路由钩子

// 导航后置守卫(当你真正进入到某个页面之后才执行)
router.afterEach((to, from) => {
    // 设置路由的标题 (可自定义)
    document.title = to.meta.title || '常驻标题'
        // 将所有的页面切换之后滚动到最顶部
    window.scrollTo(0, 0)
})

源码

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [{
        path: "/",
        redirect: '/login', // 重定向:重新指向其它path,会改变网址
    },
    // 过app.vue
    {
        path: '/login',
        name: '', //name是跳转时用params的跳转名字不加/,params跳转的方式,地址栏不显示
        meta: {
            title: '后台管理登录',
            isRelease: false,

        },
        component: () =>
            import ('../views/login.vue')
    },
    {
        path: '/main',
        name: '',
        component: () =>
            import ('../views/main/main.vue'),
        children: [{
                path: '/',
                name: '',
                meta: {
                    title: '后台管理主页',
                    isRelease: true,

                },
                component: () =>
                    import ('../views/main/index.vue')
            },
            {
                path: '/userList',
                name: '',
                meta: {
                    title: '用户列表',
                    isRelease: true,
                },
                component: () =>
                    import ('../views/main/userList.vue')
            }

        ]
    }
]

const router = new VueRouter({
    routes
})

// 在路由元信息配置守卫 requiredPath为true, 适合守卫多个页面 vue3next() 变成return true
router.beforeEach((to, from, next) => {
    if (localStorage.getItem('token')) {
        next()
    } else {
        if (to.meta.requiredPath) { //没有token requiredPath为true 守卫不让进,跳入login
            next('/login')
        } else {
            next()
        }
    }

})

// 导航后置守卫(当你真正进入到某个页面之后才执行)
router.afterEach((to, from) => {
    // 设置路由的标题 (可自定义)
    document.title = to.meta.title || '常驻标题'
        // 将所有的页面切换之后滚动到最顶部
    window.scrollTo(0, 0)
})
export default router

组件级守卫

组件级路由守卫 放在要守卫的组件里，除了全局是router.开头,其他是befor(没.)开头,跟data和methods同级

 beforeRouteLeave(to, from, next) {
    const answer = window.confirm('还没有保存,确定要离开吗?')
    if (answer) {
        next()
    } else {
        next(false)
    }

(1)query 和 params的区别？

 query可以使用name和path而params只能使用name没有/, 使用query传参刷新后不会丢失，而params传参刷新后会丢失, query在地址栏中会显示Params不会显示， Params可以动态路由一起使用

 (2)vue路由的跳转方式有几种

1、<router-link to="需要跳转到页面的路径">
​
2、this.$router.push()跳转到指定的url，并在history中添加记录，点击回退返回到上一个页面
​
3、this.$router.replace()跳转到指定的url，但是history中不会添加记录，点击回退到上上个页面
​
4、this.$touter.go(n)向前或者后跳转n个页面，n可以是正数也可以是负数

动态路由:在 router 目录下的 index.js 文件中，对 path 路径加上 / :动态路由的名字这种形式拼接,在  发起请求的时候拼接上+this.$router.params.动态路由名字,接受使用 this.route.params.动态路由名字

(3)路由的守卫有6种

2个全局守卫, 3个组件级守卫, 1个路由独享守卫   each全局的意思

一: 全局的守卫无论访问哪一个路径，都会触发全局的钩子函数，位置是调用route/index.js 写在router/index.js

router.beforeEach() 进入之前触发

router.afterEach() 进入之后触发

二：组件级路由守卫 放在要守卫的组件里，除了全局是router开头,其他是befor开头,跟data和methods同级

beforeRouteEnter(to,from,next){ } //路由进入之前

beforeRouteUpdate(){ }//更新之前

beforeRouteLeave(){}//离开之前

三：单个路由规则独享的守卫 写在路由配置中，只有访问到这个路径，才能触发钩子函数 beforeEnter(){}

to(路由对象)即将要进入的目标

from 来自那

next方法 resolve 钩子函数 代表执行下一步

fo in 和 fo of区别

fo in遍历的key , fo of遍历是value,但不能遍历普通对象,要需要配合Object.keys()一起使用  

var person={

    name:'coco',

    age:22,

    locate:{

        country:'China',

        city:'beijing',

    }

}

for(var value of Object.keys(person)){

    //使用Object.keys()方法获取对象key的数组

    console.log(key+": "+person[value]);//name: coco,age: 22,locate: [object Object]

}

完!