vue页面跳转---编程式导航

编程式导航

除了使用 创建 a 标签来定义导航链接，我们还可以借助 Router 的实例方法，通过编写代码来实现：

声明式	编程式
	router.push(...)

注意，因为在 Vue 实例内部，可以通过 $router 访问 Router 的实例。所以 Router 的实例方法 push 可以用 this.$router.push(…) 调用。

用router.push进行页面跳转及参数传递

一、router.push 的参数为字符串路径

router.push 方法的参数可以是一个字符串路径：

router.push('user')
router.push('/user')

下面详细说明上面两种写法的不同，主要是跳转后 url 的变化不同：

原 url	localhost:8080	localhost:8080/home
router.push('user') 跳转后的 url	localhost:8080/user	localhost:8080/home/user
router.push('/user') 跳转后的 url	localhost:8080/user	localhost:8080/user

因为 / 意味着匹配根路由，所以 ‘/user’ 这样的写法不管原路径 localhost:8080/?? 中的 ?? 是什么，跳转后 url 都会变为 localhost:8080/user。

二、router.push 的参数为描述地址的对象

router.push 方法的参数可以是一个描述地址的对象：

// 对象
// 这种写法和字符串类型的参数一样
router.push({
      path: 'home' })

// 命名的路由
router.push({
      name: 'user', params: {
      userId: '123' }})

// 带查询参数，变成 /register?plan=private
router.push({
      path: 'register', query: {
      plan: 'private' }})

只提供 path 值的参数和字符串类型的参数是一样的。这里就不再说了。我们主要看一下后两种写法。

• { name: ‘user’, params: { userId: ‘123’ }}
  ·对应的命名路由为： { path:‘user/:userId’, name:‘user’ }；
  ·跳转后 url：localhost:8080/user/123；
  ·取参数：$route.params.userId；
• { path: ‘register’, query: { plan: ‘private’ }}
  ·对应的路由为： { path:‘register’ }；
  ·跳转后 url：localhost:8080/register?plan=private；
  ·取参数：$route.query.plan；

小结一下参数传递的对应规则：

• name 对应 params，路径形式：user/123；
• path 对应 query，路径形式：user?id=123；

如果使用 path 进行页面跳转的时候，写 params 进行传参会被忽略：

 params 会被忽
router.push({
      path: 'user', params: {
      userId: '123' }})

可以换成下面的写法：

router.push({
      path: 'user/123'})

同样的规则也适用于 router-link 组件的 to 属性。

页面跳转后如何获取参数

之前我们说可以通过 $route 访问当前路由，现在我们看看 $route 到底能给我们提供些什么信息。

现在我们访问本地启动的工程的一个地址 http://localhost:8080/user/123?name=userName#abc，对应的 $route 如下：

// $route
{
     
  // 路由名称
  name: "user",
  meta: {
     },
  // 路由path
  path: "/user/123",
  // 网页位置指定标识符
  hash: "#abc",
  // window.location.search
  query: {
     name: "userName"},
  // 路径参数 user/:userId
  params: {
     userId: "123"},
  fullPath: "/user/123?name=userName#abc"
}

页面跳转后获取参数可以很方便的通过 $route.query、$route.params、$route.hash 获取。