欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue3路由配置以及路由跳轉(zhuǎn)傳參詳解

 更新時(shí)間：2023年04月18日 08:57:05   作者：努力學(xué)前端Hang  
路由跳轉(zhuǎn)的同時(shí)傳遞參數(shù)是比較常見的,下面這篇文章主要給大家介紹了關(guān)于vue3路由配置以及路由跳轉(zhuǎn)傳參的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

1、安裝路由

npm i vue-router

2、編寫需要展示的路由

在src目錄下創(chuàng)建pages文件夾，里面創(chuàng)建兩個(gè)vue文件命名為student.vue,person.vue

分別編寫兩個(gè)vue文件

student.vue和person.vue

<template>
    學(xué)生
</template>
 
<script setup>
 
</script>
 
<style scoped lang="less">
 
</style>
<template>
人類
</template>
 
<script setup>
 
</script>
 
<style scoped lang="less">
 
</style>

3、配置路由

在src目錄下配置router.js文件

import { createRouter,createWebHistory } from "vue-router";
const router=createRouter({
    history:createWebHistory(),
    routes:[
        {
            component:()=>import('../pages/person.vue'),
            name:'person',
            path:'/person'
        },
        {
            component:()=>import('../pages/student.vue'),
            name:'student',
            path:'/student'
        },
        {
            //實(shí)現(xiàn)路由重定向，當(dāng)進(jìn)入網(wǎng)頁(yè)時(shí)，路由自動(dòng)跳轉(zhuǎn)到/student路由
            redirect:'/student',
            path:'/'
        }
    ]
})
export default router

3、使用路由

在main.js中使用路由

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
 
createApp(App).use(router).mount('#app')

在app.vue中進(jìn)行路由展示，使用router-link進(jìn)行路由跳轉(zhuǎn)，to代表跳轉(zhuǎn)到哪個(gè)路由

<template>
  <router-view></router-view>
  <hr>
  <div>
    <router-link to="/student">到student路由</router-link>
    <br>
    <router-link to="/person">到person路由</router-link>
  </div>
</template>
 
<script setup>
 
</script>
<style scoped>
 
</style>

效果如下圖所示，點(diǎn)擊（到student路由）或（到person路由）會(huì)進(jìn)行路由跳轉(zhuǎn)

4、編程式路由

聲明式路由通過router-link進(jìn)行路由跳轉(zhuǎn)，編程式路由通過函數(shù)實(shí)現(xiàn)

修改app.vue，vue3使用的是組合式API，需要引入

要引入useRouter,useRoute,還要

const router=useRouter()

const route=useRoute()

<template>
  <router-view></router-view>
  <hr>
  <div>
    <button @click="toStudent">到student路由</button>
    <br>
    <button @click="toPerson">到person路由</button>
  </div>
</template>
 
<script setup>
import {useRouter,useRoute} from 'vue-router'
const router=useRouter()
const route=useRoute()
const toStudent=()=>{
  router.push('student')
}
const toPerson=()=>{
  router.push('person')
}
</script>
<style scoped>
 
</style>

通過router.push進(jìn)行路由跳轉(zhuǎn)

路由之間用router路由器，當(dāng)前路由使用toute路由

結(jié)果如下圖所示，實(shí)現(xiàn)編程式路由跳轉(zhuǎn)

 如果在配置路由時(shí)沒有設(shè)置別名，需要通過router.push配置對(duì)象進(jìn)行跳轉(zhuǎn)

const toStudent=()=>{
  router.push({
    path:'/student'
  })
}
const toPerson=()=>{
  router.push({
    path:'/person'
  })
}

5、路由傳參

5、1query參數(shù)傳遞

向student路由傳遞id,name

const toStudent=()=>{
  router.push({
    path:'/student',
    query:{
      id:1,
      name:'張三'
    }
  })
}

student路由接收query參數(shù)

<template>
    學(xué)生組件
    <div>{{data.query}}</div>
</template>
 
<script setup>
import { reactive } from 'vue';
import {useRouter,useRoute} from 'vue-router'
const route=useRoute()
let data=reactive({
    query: route.query
})
</script>

效果如下圖所示

5、2傳遞params參數(shù) 

假設(shè)向person路由傳遞params參數(shù)，要在路由配置時(shí)進(jìn)行修改

params傳參需要使用name進(jìn)行指定路由

const toPerson=()=>{
  router.push({
    name:'person',
    params:{
      keyword:2
    }
  })
}

同時(shí)在路由配置需要修改，假設(shè)傳遞的是keyword，

需要在path使用占位符加關(guān)鍵字

？表示可傳可不傳

{
      component:()=>import('../pages/person.vue'),
      name:'person',
      path:'/person/:keyword?'
},

在person.vue中接收params參數(shù)

<template>
    人類組件
    <div>{{data.params.keyword}}</div>
</template>
 
<script setup>
import { reactive } from 'vue';
import {useRouter,useRoute} from 'vue-router'
const route=useRoute()
let data=reactive({
    params: route.params
})
</script>

效果如下所示

6、子路由配置

給student路由添加子組件(stu1，stu2組件)

子組件的path不帶 /  

{
            component:()=>import('../pages/student.vue'),
            name:'student',
            path:'/student',
            children:[
                {
                    path:'stu1',
                    name:'stu1',
                    component:()=>import('../pages/stu1.vue')
                },
                {
                    path:'stu2',
                    name:'stu2',
                    component:()=>import('../pages/stu2.vue')
                },
                {
                    path:'',
                    component:()=>import('../pages/stu1.vue')
                }
            ]
        }

編寫stu1組件

<template>
stu1
</template>
 
<script setup>
 
</script>
 
<style scoped lang="less">
 
</style>

編寫stu2組件

<template>
stu2
</template>
 
<script setup>
 
</script>
 
<style scoped lang="less">
 
</style>

 在student組件進(jìn)行子組件展示

<template>
    學(xué)生組件
    <div>{{data.query}}</div>
    子組件展示
    <router-view></router-view>
    <router-link to="/student/stu1">到stu1</router-link>
    <router-link to="/student/stu2">到stu2</router-link>
</template>
 
<script setup>
import { reactive } from 'vue';
import {useRouter,useRoute} from 'vue-router'
const route=useRoute()
let data=reactive({
    query: route.query
})
</script>

通過使用router-link進(jìn)行路由跳轉(zhuǎn)，也可以通過編程式路由跳轉(zhuǎn)

to="/student/stu1"  需要使用完整路徑進(jìn)行跳轉(zhuǎn)

效果展示

總結(jié)

到此這篇關(guān)于vue3路由配置以及路由跳轉(zhuǎn)傳參的文章就介紹到這了,更多相關(guān)vue3路由配置及跳轉(zhuǎn)傳參內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • vue中的el-button樣式自定義方式

    vue中的el-button樣式自定義方式

    這篇文章主要介紹了vue中的el-button樣式自定義方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2022-07-07
  • 淺談vue?腳手架文件結(jié)構(gòu)及加載過程

    淺談vue?腳手架文件結(jié)構(gòu)及加載過程

    這篇文章主要介紹了vue腳手架文件結(jié)構(gòu)及加載過程淺談,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2023-08-08
  • 基于Vue3封裝實(shí)現(xiàn)圖片查看器

    基于Vue3封裝實(shí)現(xiàn)圖片查看器

    這篇文章主要為大家詳細(xì)介紹了如何基于Vue3封裝實(shí)現(xiàn)一個(gè)圖片查看器,可以點(diǎn)擊圖片放大和關(guān)閉放大的圖片,感興趣的小伙伴可以了解一下
    2025-02-02
  • vue+element獲取el-table某行的下標(biāo),根據(jù)下標(biāo)操作數(shù)組對(duì)象方式

    vue+element獲取el-table某行的下標(biāo),根據(jù)下標(biāo)操作數(shù)組對(duì)象方式

    這篇文章主要介紹了vue+element獲取el-table某行的下標(biāo),根據(jù)下標(biāo)操作數(shù)組對(duì)象方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨想過來看看吧
    2020-08-08
  • Element?Plus組件Form表單Table表格二次封裝的完整過程

    Element?Plus組件Form表單Table表格二次封裝的完整過程

    一般在后臺(tái)管理系統(tǒng)的開發(fā)中,都會(huì)遇到很多table,但每一次都去引入el-table就會(huì)導(dǎo)致代碼十分冗余,所以基于組件做一下二次封裝成自己需要的組件就十分nice,下面這篇文章主要給大家介紹了關(guān)于Element?Plus組件Form表單Table表格二次封裝的相關(guān)資料,需要的朋友可以參考下
    2022-09-09
  • mint-ui 時(shí)間插件使用及獲取選擇值的方法

    mint-ui 時(shí)間插件使用及獲取選擇值的方法

    下面小編就為大家分享一篇mint-ui 時(shí)間插件使用及獲取選擇值的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2018-02-02
  • vue使用echarts實(shí)現(xiàn)立體柱形圖

    vue使用echarts實(shí)現(xiàn)立體柱形圖

    這篇文章主要為大家詳細(xì)介紹了vue使用echarts實(shí)現(xiàn)立體柱形圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2022-04-04
  • vue中computed順序、watch順序、響應(yīng)次數(shù)使用

    vue中computed順序、watch順序、響應(yīng)次數(shù)使用

    這篇文章主要介紹了vue中computed順序、watch順序、響應(yīng)次數(shù)使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-08-08
  • vue 在單頁(yè)面應(yīng)用里使用二級(jí)套嵌路由

    vue 在單頁(yè)面應(yīng)用里使用二級(jí)套嵌路由

    這篇文章主要介紹了vue 在單頁(yè)面應(yīng)用里使用二級(jí)套嵌路由，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下
    2020-12-12
  • vue?eslint報(bào)錯(cuò):Component?name?“xxxxx“?should?always?be?multi-word.eslintvue的4種解決方案

    vue?eslint報(bào)錯(cuò):Component?name?“xxxxx“?should?always?be?

    新手在使用腳手架時(shí)總會(huì)報(bào)各種錯(cuò),下面這篇文章主要給大家介紹了關(guān)于vue?eslint報(bào)錯(cuò):Component?name?“xxxxx“?should?always?be?multi-word.eslintvue的4種解決方案,需要的朋友可以參考下
    2022-07-07

最新評(píng)論