路由

曦杨 2022/7/26 VUE

# 基本介绍

传统的页面通过超链接实现页面的切换和跳转,在vue中是通过路径上切换实现组件切换,因为vue是单页面应用,只有一个index.html页面切换都是用vue-router来实现

# 安装

如果用的vue-cli搭建项目，搭建时可以配置安装，如果安装后可以忽略这一步

安装命令: npm i vue-router

# router组件

# router-link

声明式跳转，可以通过点击实现路由跳转
属性:

to 跳转的路由路径
tag 渲染页面上的标签（div button 等...配置什么页面上显示什么标签）
replace 点击会调用router.replace() 而不是 router.push()，导航后不会留下 history 记录。
append在原来的路径上添加器路径如：我们从 /a 导航到一个相对路径 b，如果没有配置 append，则路径为 /b，如果配了，则为 /a/b
active-class 定义class名，这里不是class定义而是使用active-class

# router-view

用来显示路由组件，必须定义，要不你配置的路由在哪里显示？一般放在路由的根组件上，例如：app.vue中

# 获取路由

# 完整路由 this.$router

可以访问路由所有挂载的实例 (opens new window)

# 当前路由 this.$route

访问当前路由挂载的实例路由对象

# 路由跳转

声明式跳转
逻辑跳转
- this.$router.push()
  - 有历史记录
  - 可以通过history.go(-1)返回上一个页面
- this.$router.replace()
  - 没有历史记录

# 路由传参

第一种
- this.$router({path:'路径',query:{}})
第二种
- this.$router({name:'路径',params:{}})

query参数需要path作为跳转条件,params需要name作为跳转条件

# 动态路由

在路由表中配置path时再结尾加上/:

{
  path: '/tab/:id',
  name: 'tab',
  component: Tab
}

可以通过/tab/任意访问该组件

# 重定向

重定向通过 routes 配置来完成，下面例子是从 /a 重定向到 /b

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' }
  ]
})

# 路由守卫

类似生命周期，路由状态发生变换时候会触发对应的钩子也可以叫路由拦截,好比有个保安在看门，你有权限就可以进入房子，没有权限就被拒之门外

# 全局守卫

# beforeEach

在路由跳转前触发，参数包括to,from,next 参数

to 将要进入离开的路由
from 来自哪个页面
next 通过,决定是否展示你要看到的路由页面

# afterEach

路由跳转完成后触发,在beforeEach之后局部守卫之前参数

to 将要访问的路径
from 代表从哪个路径跳转而来
next 通过,决定是否展示你要看到的路由页面

# 路由独享

单个路由配置的时候也可以设置的钩子函数,只有一个钩子函数beforeEnter。先执行完beforEach后再触发beforEnter

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

# 组件守卫

跟生命周期差不多，相当于像组件中添加生命周期钩子函数

# beforeRouteEnter

路由进入之前调用，该守卫内访问不到组件的实例，需要传递一个回调给next才可以访问

beforeRouteEnter (to, from, next) {
  // 这里还无法访问到组件实例，this === undefined
  next( vm => {
    // 通过 `vm` 访问组件实例
  })
}

# beforeRouteUpdate

在当前路由改变时，并且该组件被复用时调用。可以访问this实例
例如：带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，组件实例会被复用

# beforeRouteLeave

导航离开该组件的对应路由时调用，可以访问组件实例this，参数包括to，from，next。

组件缓存 vue开发技巧

曦杨小破站

路由

路由