VueRouter

刘厚水发布于2019-08-23 18:08 / 1827人阅读

摘要：当对应的路由匹配成功，将自动设置属性值。执行效果依赖方法的调用参数。而这个钩子就会在这个情况下被调用。滚动行为只在支持的浏览器中可用。当且仅当导航通过浏览器的前进后退按钮触发时才可用。

当  对应的路由匹配成功，将自动设置 class 属性值 .router-link-active 。

默认 hash 模式：使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。
history 模式：充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面，此模式如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面。

动态路由匹配
{path: "/user/:id", component: User}
user/abc user/123 都将映射到相同的路由
this.$route.params.id（template 中 $route.params.id）

{path: "/user-*"} 匹配以 `/user-` 开头的任意路径

嵌套路由
User 需要 
children 路径不能以 "/" 开头
{
  path: "/user",
  component: User,
  children: [
    {
      // 当 /user/profile 匹配成功，
      // UserProfile 会被渲染在 User 的  中
      path: "profile",
      component: UserProfile
    },
    {
      // 当 /user/posts 匹配成功
      // UserPosts 会被渲染在 User 的  中
      path: "posts",
      component: UserPosts
    }
  ]
}

编程式的导航
 等同于调用 router.push(...)
this.$router.push(location, onComplete?, onAbort?)
this.$router.push("home")
this.$router.push({ path: "register", query: { plan: "private" }})
this.$router.push({ name: "user", params: { userId: "123" }})

location 如果提供了 path，params 会被忽略，解决办法：{path: `register/${id}`}

onComplete 和 onAbort 两个回调用于导航成功完成（在所有的异步钩子被解析之后）或终止（导航到相同的路由、或在当前导航完成之前导航到另一个不同的路由）的时候进行相应的调用

 等同于调用 router.replace(...)，和 router.push() 唯一的不同就是，它不会向 history 添加新记录，而是替换掉当前的 history 记录

router.go(n) 这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)。


命名视图




{
  path: "/",
  components: {
    default: Foo,
    a: Bar,
    b: Baz
  }
}


重定向和别名
{ path: "/a", redirect: "/b" }
{ path: "/a", redirect: { name: "foo" }}
{ path: "/a", redirect: to => {
  // 方法接收 目标路由 作为参数
  // return 重定向的 字符串路径/路径对象
}}

{ path: "/a", component: A, alias: "/b" }


导航守卫
全局前置守卫
router.beforeEach((to, from, next) => {
  // to: Route: 即将要进入的目标 路由对象
  // from: Route: 当前导航正要离开的路由
  // next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
  // some code
  next()
})

全局后置钩子
router.afterEach((to, from) => {
  // ...
})

路由独享的守卫
{
  path: "/foo",
  component: Foo,
  beforeEnter: (to, from, next) => {/* */}
}

组件内的守卫
const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 【不能】获取组件实例 `this`，不过，你可以通过传一个回调给 next来访问组件实例
    next(vm => {
      // 通过 `vm` 访问组件实例
    })
    // 因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }
}

路由元信息
{
  path: "bar",
  component: Bar,
  meta: { requiresAuth: true, title: "BAR" }
}
遍历 $route.matched 来检查路由记录中的 meta 字段。

滚动行为
scrollBehavior 只在支持 history.pushState 的浏览器中可用。
new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。
    // return 期望滚动到哪个的位置
  }
})


路由懒加载
const Foo = () => import("./Foo.vue")

https://router.vuejs.org/zh/

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104725.html

VueRouter基础

摘要：的路径的路由组件点击后的结果你会发现被匹配后中的就会接收到字符串，因此输出结果如图所示对象模式如果是一个对象，它会被按原样设置为组件属性。最终的就是传入的安装直接下载（官方CDN） https://unpkg.com/vue-router/...通过页面script标签引入，如下： NPM安装 npm install vue-router --save-dev 安装完成后需要Vu...

FreeZinG 2019-08-01 18:15 评论0 收藏0
VueRouter基础

摘要：的路径的路由组件点击后的结果你会发现被匹配后中的就会接收到字符串，因此输出结果如图所示对象模式如果是一个对象，它会被按原样设置为组件属性。最终的就是传入的安装直接下载（官方CDN） https://unpkg.com/vue-router/...通过页面script标签引入，如下： NPM安装 npm install vue-router --save-dev 安装完成后需要Vu...

Aklman 2019-08-29 14:06 评论0 收藏0
VueRouter基础

摘要：的路径的路由组件点击后的结果你会发现被匹配后中的就会接收到字符串，因此输出结果如图所示对象模式如果是一个对象，它会被按原样设置为组件属性。最终的就是传入的安装直接下载（官方CDN） https://unpkg.com/vue-router/...通过页面script标签引入，如下： NPM安装 npm install vue-router --save-dev 安装完成后需要Vu...

golden_hamster 2019-08-21 18:18 评论0 收藏0
Vue源码解析

摘要：系列文章链接主要记录自己开始学习的一些源码阅读基于版本介绍了构造函数如何来的，以及其上的属性方法原型方法静态方法的过程发生了什么对象如何生成对象如何挂载到真实的节点介绍了的插入，的使用，实例的生成实例对象上的和对象的创建中的组件和的源码系列文章链接主要记录自己开始学习Vue的一些源码阅读：基于2.5.8版本 Vue-SourceCode 介绍了 Vue构造函数如何来的，以及其上的属...

zgbgx 2019-08-22 15:05 评论0 收藏0
一步步从零开始学习vue-router

摘要：前言一个包含的简单，从第一个开始，依次深入学习，即可快速上手强大的。前言一个包含 vue-router的简单demos，从第一个demo开始，依次深入学习，即可快速上手强大的vue-router。如何使用安装模块pure 或 http-server来启动服务器npm install -g puer or npm install -g http-server 克隆仓库启动服...

Cobub 2019-08-22 17:34 评论0 收藏0
VueRouter进阶一(导航钩子和路由元信息)

摘要：有多种方式可以在路由导航发生时执行钩子全局的单个路由独享的或者组件级的。进行管道中的下一个钩子。当前的导航被中断，然后进行一个新的导航。通过访问组件实例路由元信息你可以在中直接访问。导航钩子 vue-router 提供的导航钩子主要用来拦截导航，让它完成跳转或取消。有多种方式可以在路由导航发生时执行钩子：全局的, 单个路由独享的, 或者组件级的。全局钩子你可以使用 router....

liukai90 2019-08-22 11:05 评论0 收藏0