Vue-router-路由传参

Vue-路由传参

在vue中,页面路由里不再只能由 ?key=value 的形式传递参数

还可以使用路径参数的方式传递参数


路径参数

router.js 路由规则

准备页面ShowDetail,并在路由规则中添加路径映射

routes: [
    {
        path: "/showDetail/:id/:laguage",
        component: ShowDetail
    },
    ……
]

这里的/:id/:laguage是占位符,而不是路径名


App.vue 声明式路由传参

使用router-link标签路由到ShowDetial组件

<router-link to="/showDetail/1/java">声明式路由路径传参</router-link>

这里的/1/java都是路径传参,与路由规则中的占位符相呼应


App.vue 编程式路由传参

无论是声明式路由还是编程式路由,都是针对路由规则中提前编写好的占位符赋值,没有本质区别

<script setup>
  import { useRouter } from "vue-router"
  const router = useRouter()
  
  function showDetail(id, name){
    // 两种不同的实现方法
    // router.push(`/showDetail/${id}/${name}`)
    router.push({
      path:`/showDetail/${id}/${name}`
    })
  }
</script>

<template>
  <div>
    <button @click="showDetail(2,'php')">编程式路由路径传参</button>
    <router-view></router-view>
  </div>
</template>

<style scoped>

</style>

ShowDetail 参数接受

在ShowDetail组件中,我们使用useRoute方法来接收参数

注:这个方法不是useRouter,那个是编程式路由的API,这个是路由传参的API!!!

使用useRoute生成route对象,用以调用不同的API

  • route.params:用以接受路径参数的API
  • route.query:用以接受键值对参数的API

使用生命周期的钩子函数可以在传递参数时的页面参数实时变化,个人认为这里可以使用watchEffect监听响应式数据来实现

<script setup>
// 接受传递过来的路径参数
// 这里使用useRoute,而不是useRouter
  import { useRoute } from 'vue-router';
  import { ref ,onUpdated} from 'vue';


  const route = useRoute()
  // 定义响应式数据,用以接受参数
  let languageId = ref(0)
  let languageName = ref("")

  languageId.value = route.params.id
  languageName.value = route.params.language

  // 使用生命周期钩子,当每次更新时对页面上的数据重新赋值
  onUpdated(()=>{
    languageId.value = route.params.id
    languageName.value = route.params.language
  })
</script>

<template>
  <div>
    <h1>接受路径参数</h1>
    <h3>{{languageId}}{{languageName}}是世界上最好的编程语言</h3>
  </div>

</template>

<style scoped>

</style>

键值对参数

router.js 路由规则

准备页面ShowDetail2,并在路由规则中添加路径映射

routes: [
    {
        path: "/showDetail2",
        component: ShowDetail2
    },
    ……
]

与路径参数不同,键值对参数中对路径不做任何修改


App.vue 声明式路由传参

使用router-link标签路由到ShowDetial2组件

<router-link to="/showDetail2?id=1&language=java">声明式路由键值对传参1</router-link>
<router-link v-bind:to="{path:'/showDetail2',query:{id:2,language:'php'}}">声明式路由键值对传参2</router-link>

第一种方式就很熟悉了,用常见的?key=value就可以传递键值对参数

第二种方式使用v-bind绑定to属性,就可以以对象的形式对to属性赋值,这种方式对参数个数,内容的使用更加灵活


App.vue 编程式路由传参

与之对应的,编程式路由也有俩种写法

将router.push的参数写成对象的形式时,query就负责存放传递的键值对

注:为了区分变量名,我们将形参改为paraId和paramLanguage

<script setup>
  import { useRouter } from "vue-router"
  const router = useRouter()
  
  function showDetail2(id, language){
    router.push(`/showDetail2?id=${id}&language=${language}`)
  }
    
  function showDetail2(paramId, paramLanguage){
    router.push({
      path:`/showDetail2`,
      query:{id:paramId,language:paramLanguage}
    })
  }
</script>

<template>
  <div>
    <button @click="showDetail2(3,'python')">编程式路由键值对传参</button>
    <router-view></router-view>
  </div>
</template>

<style scoped>

</style>

ShowDetail 参数接受

在ShowDetail组件中,我们使用useRoute方法来接收参数

注:这个方法不是useRouter,那个是编程式路由的API,这个是路由传参的API!!!

使用useRoute生成route对象,用以调用不同的API

  • route.params:用以接受路径参数的API
  • route.query:用以接受键值对参数的API

使用生命周期的钩子函数可以在传递参数时的页面参数实时变化,个人认为这里可以使用watchEffect监听响应式数据来实现

<script setup>
// 接受传递过来的键值对
// 这里使用useRoute,而不是useRouter
  import { useRoute } from 'vue-router';
  import { ref ,onUpdated} from 'vue';


  const route = useRoute()
  // 定义响应式数据,用以接受参数
  let languageId = ref(0)
  let languageName = ref("")

  languageId.value = route.query.id
  languageName.value = route.query.language

  // 使用生命周期钩子,当每次更新时对页面上的数据重新赋值
  onUpdated(()=>{
    languageId.value = route.query.id
    languageName.value = route.query.language
  })
</script>

<template>
  <div>
    <h1>接受键值对参数</h1>
    <h3>{{languageId}}{{languageName}}是世界上最好的编程语言</h3>
  </div>

</template>

<style scoped>

</style>

然而,路由传参其实也算是组件之间的参数传递,我们最后仍然是使用Pinia工具更好的实现组件间传参,仍然白学 😓