Vue Router 介绍和使用

发布于 2024-06-20 12:05:30 字数 3007 浏览 17 评论 0

vue Router 是 vue.js 的官方路由管理器,可以通过 hash 匹配组件并渲染而不刷新页面

vue Router 的两种路由模式

hash 模式

  • 改变#后面的 hash 值,会触发 onhashchange 事件,在该事件里对页面进行局部操作
  • hash 的变化会被浏览器记录(历史访问栈)下来,可以前进、后退、刷新而不向服务器发送请求
  • 通过匹配#后面的 hash,与 vueRouter 配置文件里的 path 对应做路由跳转

history 模式

  • 基于浏览器 history 的 pushState()、replaceState()、popState() 来实现,可以读取、修改浏览器历史记录栈
  • 可以前进、后退不发往服务器发送请求,但刷新会向服务器发送请求
  • 若匹配不到资源,则返回 404,因此需要后台支持,重定向到根目录主页

动态路由匹配

通过不同参数,来匹配到同一组件

比如我们有一个通用的文章详情页,需要通过不同的文章 id 来显示不同的内容,则我们可以通过 article:id 来完成

$route.params

一个 key/value 对象,包含了动态片段和全匹配片段

  • article/:id ​ 转换为> $route.params.id
  • article/123 ​ => $route.params.id = 123

$route.query

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

  • article?id='123' => $route.params.id = '123'

导航守卫

注意!改变路由的参数不会触发进入/离开的导航守卫

  • 使用 watch 监听$route
  • 使用组件内守卫 beforeRouteUpdate 来监听变化

全局守卫

全局前置守卫< beforeEach >

当导航被触发时会被调用,守卫是异步解析执行的,当守卫未 resolved 之前,导航一直处于等待

router.beforeEach((to, from, next) => {
    ······
})

可以在此阶段做权限校验

全局解析守卫< beforeResolve >

当导航被确认同时组件内守卫和异步守卫都解析后触发

全局后置钩子< afterEach >

导航跳转完成后被触发

router.afterEach((to, from) => {
    ······
})

路由独享守卫

beforeEnter

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

组件内守卫

仅限在组件内定义使用

beforeRouteEnter

 beforeRouteEnter (to, from, next) {
    // 不!能!获取组件实例 `this`
    // 因为当守卫执行前,组件实例还没被创建
}
  • 在渲染该组件对应路由被确认前调用
  • 在此阶段无法访问 this,因为守卫在导航确认前被调用,此时组件还未被创建
  • 可以通过给 next 设置回调来访问 this
beforeRouteEnter (to, from, next) {
    next(vm => {
        通过 vm 访问组件实例
    })
}

beforeRouteUpdate

beforeRouteUpdate (to, from, next) {
    // 可以访问 this
    this.name = to.params.name // 可以获取路由参数
    next()
}
  • 当导航路由发生改变,组件被复用时触发
  • 复用组件时无法触发进入、离开的导航守卫
  • 给路由传参会触发此守卫

beforeRouteLeave

beforeRouteLeave (to, from, next) {
    const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
    if (answer) {
        next()
    } else {
        next(false) // 可通过此方法取消导航
    }
}
  • 当离开此导航路由时触发
  • 一般用于禁止用户还未保存修改前离开

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据

关于作者

从来不烧饼

暂无简介

0 文章
0 评论
21 人气
更多

推荐作者

emdigitizer10

文章 0 评论 0

残龙傲雪

文章 0 评论 0

奢望

文章 0 评论 0

微信用户

文章 0 评论 0

又爬满兰若

文章 0 评论 0

独孤求败

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文