vue:rounter

this.$router.go()

// go forward by one record, the same as history.forward()
router.go(1)

// go back by one record, the same as history.back()
router.go(-1)

// go forward by 3 records
router.go(3)

this.$router.push(’/’)

// literal string path
router.push('home')
// object
router.push({ path: 'home' })
// named route
router.push({ name: 'user', params: { userId: 123 }})
// with query, resulting in /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

注意：params如果path提供了a，则会被忽略，但不是这种情况query，如上例所示。相反，您需要提供name路由或path使用任何参数手动指定整个：

const userId = 123
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// This will NOT work
router.push({ path: '/user', params: { userId }}) // -> /user
router.replace(location, onComplete?, onAbort?)

它的作用就像router.push，唯一的区别是它导航而不推送新的历史条目，顾名思义 - 它取代了当前的条目。
$ route.path
类型： string
一个等于当前路径路径的字符串，始终解析为绝对路径。例如"/foo/bar"。
$ route.params
类型： Object
包含动态线段和星形线段的键/值对的对象。如果没有参数，则该值将是空对象。
$ route.query
类型： Object
包含查询字符串的键/值对的对象。例如，对于路径/foo?user=1，我们得到$route.query.user == 1。如果没有查询，则该值将是空对象。
$ route.hash
类型： string
当前路由的哈希值（#如果有）。如果没有散列，则该值将为空字符串。
$ route.name
当前路由的名称（如果有）。（参见命名路线）

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
router.push({ name: 'user', params: { userId: 123 }})
$ route.redirectedFrom

正在重定向的路由的名称（如果有的话）。（请参阅重定向和别名）
重定向也在routes配置中完成。要重定向/a到/b：

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

重定向也可以定位到命名路线：

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

甚至使用函数进行动态重定向：

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: to => {
      // the function receives the target route as the argument
      // return redirect path/location here.
    }}
  ]
})

模版：

const User = {
  template: `
    <div class="user">
      <h2>User {{ $route.params.id }}</h2>
      <router-view></router-view>
    </div>
}

const router = new VueRouter({
  routes: [
    // dynamic segments start with a colon
    { path: '/user/:id', component: User，children: [
        {
          // UserProfile will be rendered inside User's <router-view>
          // when /user/:id/profile is matched
          path: 'profile',
          component: UserProfile
        },
        {
          // UserPosts will be rendered inside User's <router-view>
          // when /user/:id/posts is matched
          path: 'posts',
          component: UserPosts
        }
      ]}
  ]
})

命名视图
有时您需要同时显示多个视图而不是嵌套它们，例如创建具有sidebar视图和main视图的布局。这就是命名视图派上用场的地方。您可以拥有多个并为每个插座指定一个名称，而不是在您的视图中只有一个插座。router-view没有名字的A 将default作为其名称。

<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>

通过使用组件呈现视图，因此多个视图需要同一路径的多个组件。确保使用components（带有s）选项：

const router = new VueRouter({
  routes: [
 { path: '*', component: NotFoundComponent }，
    {
      path: '/',
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    }
  ]
})

滚动行为
使用客户端路由时，我们可能希望在导航到新路由时滚动到顶部，或者保留历史条目的滚动位置，就像实际页面重新加载一样。vue-router允许您实现这些甚至更好，允许您完全自定义路线导航中的滚动行为。
注意：此功能仅在浏览器支持时才有效history.pushState。
创建路由器实例时，可以提供以下scrollBehavior功能：

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // return desired position
  }
})

该scrollBehavior函数接收to和from路由对象。第三个参数savedPosition仅在这是popstate导航（由浏览器的后退/前进按钮触发）时才可用。
该函数可以返回滚动位置对象。该对象可以是以下形式：

{ x: number, y: number }
{ selector: string, offset? : { x: number, y: number }} （仅在2.6.0+中支持偏移）

如果返回假值或空对象，则不会进行滚动。
例如：

scrollBehavior (to, from, savedPosition) {
  return { x: 0, y: 0 }
}

这将简单地使页面滚动到所有路线导航的顶部。
savedPosition使用后退/前进按钮导航时，返回将导致类似本机的行为：

scrollBehavior (to, from, savedPosition) {
  if (savedPosition) {
    return savedPosition
  } else {
    return { x: 0, y: 0 }
  }
}

如果要模拟“滚动到锚点”行为：

scrollBehavior (to, from, savedPosition) {
  if (to.hash) {
    return {
      selector: to.hash
      // , offset: { x: 0, y: 10 }
    }
  }
}

我们还可以使用路径元字段来实现细粒度的滚动行为控制。在这里查看完整的示例。
＃异步滚动
2.8.0中的新功能
您还可以返回一个解析为所需位置描述符的Promise：

scrollBehavior (to, from, savedPosition) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({ x: 0, y: 0 })
    }, 500)
  })
}

可以将这与来自页面级转换组件的事件联系起来，以使滚动行为与页面转换很好地配合，但由于用例中可能存在差异和复杂性，我们只需提供此原语以启用特定的用户区实现。

猜你喜欢