Vue路由跳转及路由传参

跳转

跳转使用 router

vue 的路由跳转有 3 个方法： go 、 push 、 replace

go ：接收数字， 0 刷新，正数前进，负数后退

push ：添加，向页面栈中添加一条记录，可以后退

replace ：替换，替换页面栈中最新的一条记录，不可后退

push 和 replace 方法可接受字符串或对象

字符串：匹配 path

对象：对象内指定

1. 在页面中引入router

import { useRouter } from 'vue-router'
const router = useRouter()

2. 写跳转即可

// router.push('/about')
router.push({
name: 'about'
})

传参

接收统一使用route

1. import { useRoute } from 'vue-router'
2. const route = useRoute()

传参有两种： query 参数、 params 参数

query ：

地址上表现为： /about?id=1

传：在跳转方法中添加 query 属性，属性内写需要传递的参数

接：在 route 的 query 属性中取值

params ：

地址上表现为： /about/1

配置：在路由配置中 path 后面添加 /: 参数名

传：在跳转方法中添加 params 属性，属性内写需要传递的参数

接：在 route 的 params 属性中取值

注意： params 只能使用 name 跳转