Vue中路由源信息

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

路由源信息：存在父子路由关系的组件，在子路由组件中可以获取、修改父路由设置的值

（1）在router.js中设置meta属性（对象），该对象内的属性和属性值自定义，即在父路由Community的路由中设置属性login

（2）这里设置的对象meta可以在该路由组件中使用，也可以在它的子路由组件中使用

在子路由Personal路由组件中，获取login并将其修改

<script>
export default {
    data () {
      return {
        loginFlag: false
      }
    },
    methods: {
      handleClick () {
        this.loginFlag = !this.loginFlag; //(2)当点击btn后改变loginFlag的值
        this.$route.matched[0].meta.login = this.loginFlag; //(3)并将父路由中的login修改
      }
    },
    created () {
      this.loginFlag = this.$route.matched[0].meta.login; //(1)从父路由中获取该值赋给loginFlag
    }
}
</script>

（3）子路由Academic组件中，也获取这个login，根据这值true或false来判断是否可以直接通过此处的路由守卫。

  beforeRouteEnter(to, from, next) {
    const isLogin = to.matched[0].meta.login; //获取父路由组件中meta对象下的login属性值
    if(isLogin) {
      next()
      return;
    }
    const anwser = confirm("你还没有登录，登录后才可以浏览，确定登录吗？");
    if (anwser) {
      next({ name: "personal" }); //用户点击确定，跳转到登录页面
    } else {
      next(false); // 否则还停留在原来页面
    }
  },

注意：这个两个组件来回切换和点击“登录”“退出”时，函数触发的顺序：

每次切换都会使data函数中loginFlag值初始化为false，但是在页面渲染挂在之前，生命周期函数又将data中的loginFlag修改了。

以上是 Vue中路由源信息 的全部内容， 来源链接： utcz.com/z/375490.html

回到顶部