Router_路由传参

目录

• 接收路径参数
• • 声明式路由路径传参
  • 编程式路由路径传参
• 接收键值对参数
• • 声明式路由键值对传参
  • 编程式路由键值对传参

接收路径参数

声明式路由路径传参

ShowDetail.vue

<script setup>

// 接收传递过来的路径参数
// useRoute函数是用来接收参数的
//  route.params表示路径参数

import {useRoute} from 'vue-router'
import {ref} from 'vue'

let route = useRoute()
let languageId = ref(0)
let languageName = ref("")

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


</script>

<template>
  <div>
    <h1> ShowDetail 接收路径参数</h1>
    <h2>{{languageId}}{{languageName}}是世界上最好的语言</h2>
  </div>
</template>

<style scoped>

</style>

router.js

// 导入创建路由的相关方法
import Home from '../components/Home.vue'
import List from '../components/List.vue'
import Update from '../components/Update.vue'
import Add from '../components/Add.vue'
import ShowDetail from '../components/ShowDetail.vue'
import { createRouter,createWebHashHistory} from 'vue-router'
const router = createRouter({
    history:createWebHashHistory(),
    routes:[
        {
            path:"/showDetail/:id/:language",
            component:ShowDetail
        },
        {
            path:"/",
            component:Home
        },
        {
            path:"/home",
            component:Home
        },
        {
            path:"/list",
            component:List
        },
        {
            path:"/add",
            component:Add
        },
        {
            path:"/update",
            component:Update
        }
    ]

})
export default router

main.js

import { createApp } from 'vue'


import App from './App.vue'

import router from './routers/router.js'

const app = createApp(App)

app.use(router)
app.mount('#app')

App.vue

<script setup>
import {useRouter} from 'vue-router'
import {ref} from 'vue'
const router = useRouter()

</script>

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

</template>

<style scoped>

</style>

编程式路由路径传参

更改ShowDetail.vue

<script setup>

// 接收传递过来的路径参数
// useRoute函数是用来接收参数的
//  route.params表示路径参数

import {useRoute} from 'vue-router'
import {ref,onUpdated} from 'vue'

let 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> ShowDetail 接收路径参数</h1>
    <h2>{{languageId}}{{languageName}}是世界上最好的语言</h2>
  </div>
</template>

<style scoped>

</style>

更改App.vue

<script setup>
import {useRouter} from 'vue-router'
import {ref} from 'vue'
const router = useRouter()
function showDetail(id,language){
  router.push(`/showDetail/${id}/${language}`)
}

</script>

<template>
  <div>
  
  <router-link to="/showDetail/1/java">声明式路由路径传参</router-link>
  <button @click="showDetail(2,'PHP')">编程式路由路径传参</button>

  <hr>
  <router-view></router-view>
  </div>

</template>

<style scoped>

</style>

也可以使用path

接收键值对参数

声明式路由键值对传参

ShowDetail2.vue

<script setup>
// 接收传递过来的路径参数
// useRoute函数是用来接收参数的
//  route.params表示路径参数
//  route.query表示键值对

import {useRoute} from 'vue-router'
import {ref,onUpdated} from 'vue'

let 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> ShowDetail 接收键值对参数</h1>
    <h2>{{languageId}}{{languageName}}是世界上最好的语言</h2>
  </div>
</template>

<style scoped>

</style>

router.js

// 导入创建路由的相关方法
import Home from '../components/Home.vue'
import List from '../components/List.vue'
import Update from '../components/Update.vue'
import Add from '../components/Add.vue'
import ShowDetail from '../components/ShowDetail.vue'
import ShowDetail2 from '../components/ShowDetail2.vue'
import { createRouter,createWebHashHistory} from 'vue-router'
const router = createRouter({
    history:createWebHashHistory(),
    routes:[

        {
            path:"/showDetail2",
            component:ShowDetail2
        },
        {
            path:"/showDetail/:id/:language",
            component:ShowDetail
        },
        {
            path:"/",
            component:Home
        },
        {
            path:"/home",
            component:Home
        },
        {
            path:"/list",
            component:List
        },
        {
            path:"/add",
            component:Add
        },
        {
            path:"/update",
            component:Update
        }
    ]

})
export default router

App.vue

<script setup>
import {useRouter} from 'vue-router'
import {ref} from 'vue'
const router = useRouter()
function showDetail(id,language){
  // router.push(`/showDetail/${id}/${language}`)
  router.push({path:`/showDetail/${id}/${language}`})
}

</script>
<template>
  <div>
  <router-link to="/showDetail/1/java">声明式路由路径传参</router-link>
  <button @click="showDetail(2,'PHP')">编程式路由路径传参</button>
  <hr>

    <router-link to="/showDetail2?id=1&language=java">声明式路由键值对传参</router-link>
  <button @click="showDetail(2,'PHP')">编程式路由键值对传参</button>

  <router-view></router-view>
  </div>

</template>
<style scoped>
</style>

声明式路由键值对传参也可以用如下写法

编程式路由键值对传参

App.vue

<script setup>
import {useRouter} from 'vue-router'
import {ref} from 'vue'
const router = useRouter()
function showDetail(id,language){
  // router.push(`/showDetail/${id}/${language}`)
  router.push({path:`/showDetail/${id}/${language}`})
}

function showDetail2(id,language){
    router.push(`/showDetail2?id=${id}&language=${language}`)

}

</script>
<template>
  <div>
  <router-link to="/showDetail/1/java">声明式路由路径传参</router-link>
  <button @click="showDetail(2,'PHP')">编程式路由路径传参</button>
  <hr>

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

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

  <router-view></router-view>
  </div>

</template>
<style scoped>
</style>

router.push也可以用如下写法