专栏目录请点击

简介

一般我们进行路由跳转的时候有两种方式

1. 标签跳转(声明式跳转)
2. 编程式路由跳转

声明式跳转

就是使用<router-link>标签进行跳转 , 官网

to

一共有五种写法

<!-- 字符串 -->
<router-link to="/home">Home</router-link>
<!-- 渲染结果 -->
<a href="/home">Home</a>

<!-- 使用 v-bind 的 JS 表达式 -->
<router-link :to="'/home'">Home</router-link>

<!-- 同上 -->
<router-link :to="{ path: '/home' }">Home</router-link>

<!-- 命名的路由 -->
<router-link :to="{ name: 'user', params: { userId: '123' }}">User</router-link>

<!-- 带查询参数，下面的结果为 `/register?plan=private` -->
<router-link :to="{ path: '/register', query: { plan: 'private' }}">
  Register
</router-link>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

replace

是否生成记录

<router-link to="/abc" replace></router-link>
1

他最终调用的是router.replace

其他

此外，还有属性，点击

1. active-class
2. aria-current-value
3. custom
4. exact-active-class

编程式导航

所有的导航方法都会返回一个promise

router.push

// 字符串路径
router.push('/users/eduardo')

// 带有路径的对象
router.push({ path: '/users/eduardo' })

// 命名的路由，并加上参数，让路由建立 url
router.push({ name: 'user', params: { username: 'eduardo' } })

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

// 带 hash，结果是 /about#team
router.push({ path: '/about', hash: '#team' })
1
2
3
4
5
6
7
8
9
10
11
12
13
14

params参数

1. 需要注意的是如果提供了path属性又提供了params属性，那么params属性会自动失效
2. params参数一般只提供字符串和number的数据类型，其他类型如undefined、false会被自动字符串化

router.replace

他不会向history中添加新纪录

router.push({ path: '/home', replace: true })
// 相当于
router.replace({ path: '/home' })
1
2
3

router.go

接收一个整数为参数，前进或者后退多少步

// 向前移动一条记录，与 router.forward() 相同
router.go(1)

// 返回一条记录，与 router.back() 相同
router.go(-1)

// 前进 3 条记录
router.go(3)

// 如果没有那么多记录，静默失败
router.go(-100)
router.go(100)
1
2
3
4
5
6
7
8
9
10
11
12