编程式导航
除了使用 <router-link> 创建 a 标签来定义导航链接,我们还可以借助 Router 的实例方法,通过编写代码来实现:
声明式 | 编程式 |
---|---|
<router-link :to="..."> | 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/??