Vue3路由跳转及传参

# 一、Vue3路由跳转及传参

useRouter 相当于vue2的this.$router全局的路由实例,是router构造方法的实例

useRoute 相当于vue2的this.$route表示当前激活的路由的状态信息,包含了当前URL解析得到的信息,还有URL匹配到的 route路由记录 useRoute, useRouter必须写到setup中

# 传递参数

传递参数使用query,path/name都行。

<script setup lang="ts" >
 import { useRoute ,useRouter} from 'vue-router'

  const route=useRoute()
  const router=useRouter()
  
  route.push("index") //名称
  route.push("/index") //path
  route.push("/index?aaa=123")


  //路径：path+query/params 都行
  route.push("/index",query:{
  aaa:123,
  bbb:456
  })

  route.push("/index",params:{
  aaa:123,
  bbb:456
  })

</scritp>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

传递参数使用name+params,如果提供了path,params 会被忽略

<script setup lang="ts">
  import { useRoute ,useRouter} from 'vue-router'

  const route=useRoute()
  const router=useRouter()

  //名称：name+params
  route.push("index",params:{
  aaa:123,
  bbb:456
  })

</script>

1
2
3
4
5
6
7
8
9
10
11
12
13

# 获取传递的参数

<script setup lang="ts">
  import { useRoute ,useRouter} from 'vue-router'
  
  //首先在setup中定义
  const route = useRoute()
  //query
  let userId=route.query.userId;
   
  //params
  let userId=route.params.userId;

</script>

1
2
3
4
5
6
7
8
9
10
11
12
13

Last Updated: 2023/08/03, 10:51:39

← 比typeof运算符更准确的类型判断 Vue 中Icon图标的使用→