vue路由使用

  • vue add router 使用历史模式吗?Y

  • 项目中生成router.js文件,所以在main.js主入口文件中引入import router from './router.js'

  • new Vue({router: router})中使用

  • routes:[]component:() => import('./views/Home.vue');懒加载

  • routes:[]redirect: () => { console.log(to.path) }重定向导航

  • routes:[]path: '*'以上所有导航不匹配时的其余路径

  • 导航选中class类名router-link-exact-active router-link-active

  • this.$router.push('/home'); js控制导航到某个位置

  • this.$route 返回当前页面导航信息参数,如paramspath

  • 动态路由:

    • <router-link :to="{name: 'question', params: {id: ...}}"></router-link>必须使用name属性,使用path属性不起作用
    • this.$router.push({ name: 'question',params: {id:...} })设置跳转路由路径,一般更新了路径页面不跳转,需要配合路由生命周期函数使用 => beforeRouteUpdate(){}路由路径更新时执行
  • 组件路由守卫

    • beforeRouteLeave(to,from,next){ next() } 路由生命周期函数,在路由离开之前执行,next执行才会切换
    • beforeRouteEnter(to,from,next) {} 路由生命周期函数,到达当前路由执行,next需要执行才能到达,并且函数内部不能获取组件实例this,如果需要获取组件实例,需要在next中获取next((vm) => { console.log(vm) })
    • beforeRouteUpdate(to,from,next){}路由路径更新时执行
  • 路由独享守卫

    • routes: [ {..., beforeEnter(to,from,next){} } ]写在router.js中某个路径下独享的守卫
  • 全局路由守卫

    • router.beforeEach((to,from,next) => { next(); })全局路由变化时守卫,main.js全局中定义
    • router.beforeResolve(to,from,next){}所有组件解析完成之前执行
    • router.afterEach(){}所有组件解析完成之后执行,没有参数
  • 路由守卫执行顺序:全局守卫beforeEach => 路由独享守卫 => 组件路由守卫 => 全局守卫beforeResolve => 全局守卫afterEach

  • 路由元信息:routes:[{..., meta:{login: true} }]

    • 通过meta来判断不太准确,因为如果使用了重定向,那么子路由就没有meta信息。但是可以通过this.$route.matched[0].meta或者导航守卫函数参数to.matched[0].meta获取
  • 通过路由元信息跳转登录

    //main.js
    router.beforeEach((to,from,next)=>{
      const needLogin = to.matched.some(item.meta && item.meta.login);
      if(needLogin) {
            const isLogin = document.cookie.includes('login=true');
            if(isLogin) {
                next();
            }else {
                const toLoginFlag = window.confirm('该页面需要登录才能访问,需要去登录嘛?')
                if(toLoginFlag) {
                    next('/login');
                }
            }
      }else {
          next();
      }
    })
    
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 前言 vue-router是什么:是vue.js官方的路由管理器和vue.js的核心深度的集成,让开发者更加简单的...
    GUAN_one阅读 3,735评论 0 2
  • Vue八个生命周期 beforeCreate【创建前】created【创建后】 beforeMount【载入前】 ...
    艾萨克菊花阅读 1,343评论 0 12
  • 来源:OBKoro1写的很好膜拜一下 前言 说到Vue的钩子函数,可能很多人只停留在一些很简单常用的钩子(crea...
    多面体_7df7阅读 2,651评论 1 9
  • 导航守卫 导航守卫主要用来通过跳转或取消的方式守卫导航。 参数或查询的改变并不会触发进入/离开的导航守卫。 1、全...
    SailingBytes阅读 1,186评论 1 3
  • 在吃鱼油的朋友看过来,鱼油的主要成分:EPA和DHA,它们的冰点是-44℃和-54℃,冰箱的冷冻室是-18℃左右,...
    健康营养阅读 1,745评论 0 0