Vue Router学习(二)

发表于 | 分类于 ，

这篇整理一下vue-router的两个部分：编程式导航及路由传值。

编程式导航

编程式导航其实是跟声明式导航相对的：

1
2
3
4
5
6
7
// 声明式路由导航
<router-link to='/books'>To Books List</router-link>

// 编程式路由导航
router.push({
  path: '/books'
})

两种方式都可以实现路由导航，使用<router-link>相当于调用了router.push。不过编程式导航，还有router.replace()，router.go()，router.back()及router.forward()方法可以调用。

router.push()&router.replace()

router.push()和router.replace()传参都是一样，分别是必须传值的location和可选的onComplete，onAbort回调。

location传入的参数可以是字符串，直接指向路由地址，也可以是描述地址的对象，还可以是路由对象及带查询参数的对象：

1
2
3
4
5
6
7
8
9
10
11
12
/* 官方文档的代码*/
// 字符串
router.push('home')

// 对象
router.push({ path: 'home' })

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

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

下面是实际项目中对编程式导航的实现及router.push()的运用：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/* 项目中的实现 */
<!-- 监听点击事件，再使用编程式导航到新路由 -->
<li
  v-for="(movie,index) in movies"
  :key="index"
  class="movie-list"
  @click="selectMovie(movie)"
  >...</li>

// 这里使用的this.$router等同于router对象
// 上一篇中说到在各个组件中都可以调用到this.$router
selectMovie (movie) {
  this.$router.push({
    name: 'movie-item',
    params: {
      id: movie.title,
      movie: movie
    }
  })
}

router.push()实际上是在history栈添加一个新的记录，也就是用户点击浏览器后退时，是可以返回到上一个路由的。

官方文档中提醒了一句：如果提供了path，params会被忽略。如果要传入无法通过路径传入的值，或者传入值较多，建议使用parmas。

可选的onComplete，onAbort回调主要用在导航完成之后及导航终止的时候进行调用。目前我还没有看到网上有什么人有讲到这部分，所以了解就好，以后再深入。

router.replace()跟router.push()有一个很大的区别，在于它不是在history栈添加一个新的记录，而是替换当前的记录，也就是无法返回上一个路由记录。其他使用方面都是一样的。

router.go()，router.back()及router.forward()

router.go()的参数是一个整数，表示在浏览器记录中向前或向后几步。如果是向前一步，就是router.go(1)，即router.back()；如果是向后一步，就是router.go(-1)，即router.forward()。

路由传值

其实前面的篇幅中，多少已经涉及到路由传值了。路由传值主要是在<router-link>的to属性中跟router.push()中使用，传值也分params跟query。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 使用动态路由时，在to属性中使用params对象传值
<router-link
  class="music-list"
  tag="li"
  :to="{name:'music-item',params:{id:music.title,music:music}}"
  v-for="music in musics"
  :key="music.title"
>...</router-link>

// 使用编程式导航时，直接在location参数中写入params传值
// query的写法一样
selectMovie (movie) {
  this.$router.push({
    name: 'movie-item',
    params: {
      id: movie.title,
      movie: movie
    }
  })
}

上面有提到，如果提供了path，params会被忽略，所以一般使用params时，就需要传入name指明路由名，如果使用query时，就可以直接传入路由路径。

传值在组件内可以通过this.$route.params及this.$route.query获得。

使用path，params时有一点需要注意，使用path传值，刷新页面参数会丢失；使用params查询参数，刷新页面参数就不会丢失。

vue-router的这两篇内容算入门内容，简单做整理，加深理解。vue-router的其他内容也会在深入学习使用之后再整理出来。