路由跳转和传参(vue3)
路由跳转和传参（vue3+Ts+setup)
准备工作：安装了路由，配置了路由表，全局注册了路由
vue3路由官方文档
- 安装路由
npm
npm install vue-router@4
yarn
yarn add vue-router@4
路由跳转
- 首先在需要跳转的页面引入
API---useRouter
import { useRouter } from 'vue-router'
- 在跳转页面定义router变量
//首先在setup中定义
const router = useRouter()
用router.push跳转页面(导航到不同的位置)
// 字符串
router.push('home')
// 对象
router.push({ path: 'home' })
用router.replace(替换当前位置)
它的作用类似于 router.push，唯一不同的是，它在导航时不会向 history 添加新记录，正如它的名字所暗示的那样——它取代了当前的条目。
也可以直接在传递给 router.push 的 routeLocation 中增加一个属性 replace: true
router.push({ path: '/home', replace: true })
// 相当于
router.replace({ path: '/home' })
用router.go横跨历史
该方法采用一个整数作为参数，表示在历史堆栈中前进或后退多少步，类似于 window.history.go(n)
// 向前移动一条记录，与 router.forward() 相同
router.go(1)
// 返回一条记录，与 router.back() 相同
router.go(-1)
// 前进 3 条记录
router.go(3)
// 如果没有那么多记录，静默失败
router.go(-100)
router.go(100)
值得一提的是，无论在创建路由器实例时传递什么样的 history 配置，Vue Router 的导航方法( push、replace、go )都能始终正常工作
路由传参
一.标签跳转页面
- template中跳转方式，直接
$router.push()即可
template中跳转方式，直接router.push()即可
//如
<button @click="$router.push('mine')">跳转到个人中心</button>
RouterLink跳转页面（相当于a标签）
<RouterLink to="/home">home页面</RouterLink>
RouterLink跳转传参
如果你要传入参数的话，就得绑定动态to属性。
<router-link :to="{name:'home', params: {id:1}}">
<router-link :to="{name:'/index',params:'我的'}">22</router-link>
<router-link :to="{name:'/',params:'我的'}">11</router-link>
<router-link :to="{name:'/father',params:'我的'}">33</router-link>
<router-link :to="{name:'//teleport',params:'我的'}">44</router-link>
// params传参数 (类似post)
// 路由配置 path: "/home/:id" 或者 path: "/home:id"
// 不配置path ,第一次可请求,刷新页面id会消失
// 配置path,刷新页面id会保留
// html 取参 route.params.id
// script 赋值取参 route.params.id
这里判定to,然后采用name来跳转到指定页面。name值是你在路由配置中的name属性。
<router-link :to="{name:'home', query: {id:1}}">
// query传参数 (类似get,url后面会显示参数)
// 路由可不配置
// html 取参 route.query.id
// script 赋值取参 route.query.id
路由跳转的时候可以配置 name 、 path ，传参方式也有 params 、query 两种。
注:传参使用带R的const router = useRouter();取参使用不带R的const route = useRoute();
一. query 显式路由传参
1. function 跳转 传递参数1：显示传参 get /item?id=1
setup() {
const router = useRouter();
let goBack = () =>{
router.push({path:'/item',query:{id:1}})
}
2. query 接收
//接收
<script setup>
import { useRoute } from 'vue-router';
const route = useRoute();
console.log(route.query.id);
</script>
二. params 隐式路由传参
1. function跳转 传递参数2：隐式传参 post
setup() {
const router = useRouter();
let goBack = () =>{
router.push({
name:'item',
params:{id:1}
})
}
return {
goBack
};
},
2. params 接收
// 接收
<script>
import { useRoute } from 'vue-router';
export default {
setup(){
const route = useRoute();
console.log(route.params.id);
}
}
</script>
三.通过动态路由方式进行传参。
需要注意的是他是写在路由配置文件中的！ router文件夹中的index.js文件中
{
path: '/tiaozhn/:id',
name: 'tiaozhn',
component: tiaozhn//dizhi
},
事件
function acty() {
var id = 1;
proxy.$router.push('/tiaozhn/' + id)
}
接收
console.log(proxy.$route.params.id);
注意：页面传参需要注意的问题
1.如果提供了 path，params 会被忽略，但query 没有这种情况，此时需要提供路由的 name 或手写完整的带有参数的 path
const userId = '123'
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user
2.上述规则同样适用于 router-link 组件的 to 属性
3.如果目的地和当前路由相同，只有参数发生了改变 (比如从一个用户资料到另一个 /users/1 -> /users/2)，你需要使用 beforeRouteUpdate 来响应这个变化 (比如抓取用户信息) 或者使用监听属性监听数据的变化