欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue路由vue-route

程序员文章站 2022-03-22 12:52:21
vue路由插件,vuer Router,使vue官方的路由管理其,和vue高度耦合 1.vue-Router的使用 2.路由的跳转 this.$router.push('/path') this.$router.push({name:'routername'}) 路由的get方式传值 this.$r ......

vue路由插件,vuer router,使vue官方的路由管理其,和vue高度耦合

  1.vue-router的使用

  

import vue from 'vue'
import router from 'vue-router' //引入路由组件

vue.use(router)

new router({
    mode: 'history', //路由的两种模式 hash 和history 默认使history模式
    routes: [
    {
      path: '/',
      name: 'home',
      component: () => import(xxx.vue)
    },
    {
      path: '/about',
      name: 'about',
      component: () => import()
    }
  ]
})

  2.路由的跳转

    this.$router.push('/path')

    this.$router.push({name:'routername'})

    路由的get方式传值

    this.$router.push({name:'routername',query:{id:xxx}})

    路由的post方式传值

    this.$router.push({name:'routername',params:{id:xxx}})

  3.路由的后退

    this.$router.go(-1) 

    this.$router.back()

  4.路由的前进

    this.$router.forward() 

  5.替换当前路由,在路由历史中不会再出现该路由

    this.$router.replace(location)

  6.当前路由的对象属性(一定要记得是小写的$route,并且没有r)

     this.$route.path   当前路由路径 path

     this.$route.name  当前路由名称

     this.$route.params.id  post方式传参时,获取id的值

     this.$route.query.id get方式传参时获取id的值

    this.$route.hash 当前路由的hash值,带#

   7.linkactiveclass

    当前激活的路由的class类名,默认是"router-link-active"

  8.scrollbehavior 

    切换路由时页面滚动到具体位子

  9.router-link 中的tag标签,生成具体的标签的html 元素

  10.router-view 路由组件具体渲染的地方

  11.全部的路由钩子函数(导航首位)

    11.1router.beforeeach  全局前置首位

    11.2router.beforeresolve 全局解析守卫

    11.3router.aftereach 全局后置守卫

    11.4beforeenter 路由独享守卫

    组件内守卫

    11.5beforerouteenter 进入

    11.6beforerouteupdate  更新

    11.7beforerouteleave 离开

    

/* 全局前置守卫 */
router.beforeeach(function (to, from, next) {
  // to 将要进路的路由 route
  // from 离开的路由 route
  // next 进入下一个路由,不调用则不会进入下一个路由
  console.log('全局前置守卫')
  next()
})

/* 全局解析守卫 */
router.beforeresolve((to, from, next) => {
  // to 将要进路的路由 route
  // from 离开的路由 route
  console.log('全局解析守卫')
  next()
})

/* 全局后置守卫 */
router.aftereach((to, from) => {
  // to 将要进路的路由 route
  // from 离开的路由 route
  console.log('全局后置守卫')
})
/* 组件独享守卫 */
      beforeenter(to, from, next) {
        console.log('组件内独享守卫')
        next()
      }
beforerouteenter(to, from, next) {
    console.log('组件内守卫进入')
    next()
  },
  beforerouteupdate(to, from, next) {
    console.log('组件内守卫更新')
    next()
  },
  beforerouteleave(to, from, next) {
    console.log('组件内守卫离开前')
    next()
  }

  执行顺序,

    1.前组件内守卫离开

    2.全局前置守卫

    3.路由独享守卫

    4.组件内守卫进入

    5.全局解析守卫

    6.全局后置守卫

  或者时刷新组件时(/about 跳转到/about?id=1111)

    1.全局前置守卫

    2.组件内守卫更新

    3.全局解析守卫

    4.全局后置守卫