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工具更好的实现组件间传参，仍然白学 😓