Vue-router理解

跳转阅读：Vue Api细分梳理

Vue-router:API整理

• routerLink详解
• routerView详解
• router实例
• 路由对象（route 不是 router）

------------------------------------问题部分-----------------------------------------------

常见问题：

• 如果要使用嵌套路由，须在父组件中增加 router-view 函数插槽
• 路由元meta,查看路由对象 route 时，可以获取 meta 的值,可以借助 这个meta信息去进行筛选

// index.js 路由配置文件
path: '/',
name: 'root',
component : resolve => require(['@/view/home/index.vue'], resolve),
children:[
  {
    path: '/ts',
    name:'ts',
    component : resolve => require(['@/view/ts/index.vue'], resolve),
    meta:{
      name:'ts',
      num : 1
    },
  },
// home -> index.vue
<template>
  <div>
    home
    <router-view></router-view>
  </div>
</template> 

• 嵌套路由实现(如："index/ball/football")，满足2点：router对象中对应路由要写好 children 、 对应 vue 组件里面写 作为子路由嵌套的位置

// router/index.js 路由配置文件
  {
    path: '/index',
    name: 'root',
    component : resolve => require(['@/view/home/index.vue'], resolve),
    children:[
      {
// 注意这里 嵌套路由的路径 无需写成 /ball 
        path: 'ball',
        name:'ball',
        component : resolve => require(['@/view/ball/index.vue'], resolve),
        meta:{
          name:'ball',
          num : 1
        }
    ]
  },
// index.vue 组件内 router-view 函数式导航供 ball 组件嵌套
<template>
<div>
    首页
    <router-View>ts</router-View>
</div>
</template> 

------------------------------------梳理部分-----------------------------------------------

• routerLink相关

  • 基本信息

    • to指向目标地址,相当于链接标签 a 的 href 属性
    • 相比于链接 a 标签
      • 优势1：router-link 会守卫点击事件，如果当前页面已是点击后的页面，不会再重新渲染页面
      • 优势2：在 HTML5 history（默认）模式下使用 base 选项之后，所有的 to 属性都不需要写 (基路径)

  • Props：属性

    • to 类型: string | Location

      表示目标地址的链接,点击之后，会立即把 to 的值传到 router.push()

      在 router-link 上绑定 click 事件，在编译过程后会被冲掉，即不会带调用

      path: '/home' 或者 'home',也可以通过name 识别路径 name:'home'

      • <!-- 不写 v-bind 也可以，就像绑定别的属性一样 -->
        <router-link :to="'home'">Home</router-link>
        <router-link :to="{ path: 'home' }">Home</router-link>
        <!-- 命名的路由  post方式-->
        <router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
        <!-- 带查询参数，下面的结果为 /register?plan=private -->
        <router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>
        

    • replace类型: boolean , 默认 false

      设置 replace ，当点击时，会调用 router.replace() 而不是 router.push(),导航后不会留下 history 记录

    • append类型: boolean , 默认 false

      设置 append ,当点击时,则在当前 (相对 /a) 路径前添加基路径 /a/b

    • tag类型: string , 默认 'a'

      想要 'router-link' 渲染成某种标签的样子，例如 'li'

    • active-class 类型: string , 默认"router-link-active"

      'router-link'渲染之后得到的标签上的class，默认是 router-link-active , 当这个标签被点击之后会新增 class "router-link-exact-active"

    • exact 类型: boolean , 默认"false"

      包含匹配 , 路由为 '/' 在路由为 '/a、/a/b' 都会被渲染css class。类似不再让模糊匹配,必须精确匹配

    • event 类型: string | Array 'string' , 默认"click"

      声明哪些事件可以 触发导航，可以是一个字符串或是一个包含字符串的数组

      SB玩意,给mouseover...没用

    • exact-active-class 类型: string , 默认""router-link-exact-active""

• routerView 详解

  • 基本信息

    • 组件是一个 functional 组件，渲染路径匹配到的视图组件,嵌套路径，渲染嵌套组件
    • 因为它是组件，所以可以配合 'transition' 和 'keep-alive' 使用。如果两个结合一起用，要确保在内层使用 'keep-alive'

  • Props：属性

    • name类型: string 默认值: "default"

      会渲染对应的路由配置中 components 下的相应组件

  • Router 构建选项

    • mode类型: string 默认值: "hash" (浏览器环境) | "abstract" (Node.js 环境)

      可选值: "hash" | "history" | "abstract"

    • base:类型: string 默认值: "/"

      应用的基路径

• router实例

  • Router 实例属性 ： this.$router可得到

    • app 类型: Vue instance

      配置了 router 的 Vue 根实例

    • mode 类型: string

      路由使用的 模式

    • currentRoute 类型: Route

      当前路由对应的 路由信息对象

  • Router 实例方法

    • router.beforeEach

    • router.beforeResolve

    • router.afterEach

    router.beforeEach((to, from, next) => {
      /* 必须调用 `next` */
    })
    router.beforeResolve((to, from, next) => {
      /* 必须调用 `next` */
    })
    router.afterEach((to, from) => {})
    

    • router.push

      router.replace

      router.go 参数： -1：前一页 / 0：当前页 / 1：下一页

      router.back

      router.forward

    router.push(location, onComplete?, onAbort?)
    router.push(location).then(onComplete).catch(onAbort)
    router.replace(location, onComplete?, onAbort?)
    router.replace(location).then(onComplete).catch(onAbort)
    router.go(n)
    router.back()
    router.forward()
    

    • router.getMatchedComponents,根据位置信息匹配到的路由组件数组

      // 通常在服务端渲染的数据预加载时使用
      const matchedComponents: Array<Component> = router.getMatchedComponents(location?)
      

    • router.addRoutes,动态添加更多的路由规则。参数必须是一个符合 routes 选项要求的数组

    • router.onError

      注册一个回调，该回调会在路由导航过程中出错时被调用。注意被调用的错误必须是下列情形中的一种：

      • 错误在一个路由守卫函数中被同步抛出

      • 错误在一个路由守卫函数中通过调用 next(err) 的方式异步捕获并处理

      • 渲染一个路由的过程中，需要尝试解析一个异步组件时发生错误

• 路由对象, 并非 router 的实例，通过 this.$route 访问

  一个路由对象 (route object) 表示当前激活的路由的状态信息，包含了当前 URL 解析得到的信息，还有 URL 匹配到的路由记录 (route records)

  这个属性是只读,路由对象是不可变 (immutable) 的，每次成功的导航后都会产生一个新的对象

  路由对象属性

  • this.$route.path 类型: string

    对应当前路由的路径，总是解析为绝对路径，如 "/foo/bar"

  • this.$route.params 类型: Object

    一个 key/value 对象，包含了动态片段和全匹配片段，如果没有路由参数，就是一个空对象

  • this.$route.query 类型: Object

    一个 key/value 对象，表示 URL 查询参数

    对于路径 /foo?user=1，则有 $route.query.user == 1

  • this.$route.hash 类型: string

    当前路由的 hash 值 (带 #) ，如果没有 hash 值，则为空字符串

  • this.$route.fullPath 类型: string

    完成解析后的 URL，包含查询参数和 hash 的完整路径

  • this.$route.matched 类型: Array(RouteRecord)

    一个数组，包含当前路由的所有嵌套路径片段的路由记录 。路由记录就是 routes 配置数组中的对象副本 (还有在 children 数组)

  • this.$route.name

    当前路由的名称，如果有的话

  • this.$route.redirectedFrom

    如果存在重定向，即为重定向来源的路由的名字

  • this.$route.beforeRouteEnter / beforeRouteUpdate / beforeRouteLeave

    增加的组件配置选项,组件内的路由守卫