Vue3之路由跳轉與參數獲取方式

更新時間：2023年05月18日 16:14:30 作者：葉子_o

這篇文章主要介紹了Vue3之路由跳轉與參數獲取方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

Vue3路由跳轉與參數獲取

路由跳轉

import { useRouter } from "vue-router"
export default {
? setup () {
? ? const router = useRouter(); // 第一步
? ? const state = reactive({
? ? ? list: [],
? ? ? toDeatil(id) {
? ? ? ? router.push('/product?id=' + id); // 第二步
? ? ? },
? ? })
? ? return {
? ? ? ...toRefs(state)
? ? }
? }
}

參數獲取

import { useRoute } from "vue-router"
export default {
? setup () {
? ? const route = useRoute(); // 第一步
? ? console.log(route.query.type); // 第二步
? ? const state = reactive({
? ? ? list: [],
? ? })
? ? return {
? ? ? ...toRefs(state)
? ? }
? }
}

Vue2和Vue3的路由跳轉及路由傳參

首先，路由跳轉的方法有兩種：

聲明式導航： router-link （務必要有to屬性），可以實現路由跳轉

編程式導航：利用的是組件實例的$router.push|replace方法，可以實現路由的跳轉（可以書寫一些自己的業(yè)務）

示例：

點擊logo按鈕，跳轉到home頁（聲明式）

                <router-link class="logo" to="/home">
                    <img src="./images/logo.png" alt="">
                </router-link>

點擊搜索按鈕，執(zhí)行跳轉（ goSearch ）（編程式）

<button class="btn" type="button" @click="goSearch">搜索</button>

這里的話，Vue2和Vue3寫法有點不一樣

Vue2中就是methods里面定義goSearch()

methods: {
    goSearch(){
        this.$router.push('/search');
    }
}

Vue3可以使用setup語法糖

<script>
import { useRouter } from 'vue-router'
export default {
    name: 'HeaderIndex',
    setup(){
        const $router = useRouter()
        // method
        function goSearch(){
            $router.push('/search');
        }
        return {
            goSearch
        }
    }
}
</script>

接著再寫一下路由傳參，那參數一共有2種：

params參數：屬于路徑當中的一部分，需要注意，在配置路由的時候，需要占位
query參數：不屬于路徑當中的一部分，類似于ajax中的queryString /home?k=v$kv=，不需要占位

比如，在搜索框中輸入一些內容，點擊搜索按鈕，完成路由傳參跳轉

接下來都是以Vue3中為例，最后再寫上vue2中的相應代碼

第一種：字符串

給搜索框進行雙向綁定keyword

<form action="###" class="searchForm">
    <input type="text" v-model="keyword"/>
    <button class="btn" type="button" @click="goSearch">搜索</button>
</form>

首先，如果要使用params參數的話，需要配置路由時進行占位

const routes = [
    {
        path:'/search/:keyword',
        component: SearchIndex,
    }

然后使用字符串形式傳遞參數

<script>
import { useRouter } from 'vue-router'
import {ref} from 'vue'
export default {
    name: 'HeaderIndex',
    setup(){
        const $router = useRouter()
        let keyword = ref('')
        // method
        function goSearch(){
            // 路由傳參
            // 第一種：字符串形式
            $router.push('/search/' + keyword.value + "?k=" + keyword.value.toUpperCase());
        }
        return {
            goSearch,
            keyword
        }
    }
}
</script>

因為我們使用了ref，所以接收參數的時候要 .value來獲取，不然是讀不到的。

/asd 就是 params參數
ASD 就是 query參數
我們可以通過輸出來驗證

我在SearchIndex.vue中通過模版字符串將它顯示

<template>
  <div>
    我是搜索
    <h1>params參數---{{$route.params.keyword}}</h1>
    <h1>query參數---{{$route.query.k}}</h1>
  </div>
</template>

第二種：模版字符串

這種寫法比第一種字符串形式會簡單一些，要替換的就是下面這串，其余不變。就是用模版字符串來代替字符串拼接而已

// 第二種：模版字符串
$router.push(`/search/${keyword.value}?k=${keyword.value.toUpperCase()}`)

第三種：對象寫法

這種寫法是最常用的，也是最直觀的

但如果使用對象寫法，并且還是用的params參數，就不能用path形式了，而是要用name形式

router/index.js中對search的路由添加name。不再使用path

{
        path:'/search/:keyword',
        component: SearchIndex,
        meta:{show:true},
        name:"search"
    }

function goSearch(){
            console.log(keyword.value);
            // 路由傳參
            // 第一種：字符串形式
            // $router.push('/search/' + keyword.value + "?k=" + keyword.value.toUpperCase());
            // 第二種：模版字符串
            // $router.push(`/search/${keyword.value}?k=${keyword.value.toUpperCase()}`)
            // 第三種：對象寫法
            $router.push({
                name:"search",
                params:{keyword:keyword.value},
                query:{k:keyword.value.toUpperCase()}
            })
        }

而Vue2中的寫法其實大同小異，就是沒有setup和ref。

function goSearch(){
            // 路由傳參
            // 第一種：字符串形式
            // this.$router.push('/search/' + this.keyword + "?k=" + this.keyword.toUpperCase());
            // 第二種：模版字符串
            // this.$router.push(`/search/${this.keyword}?k=${this.keyword.toUpperCase()}`)
            // 第三種：對象寫法
            this.$router.push({
                name:"search",
                params:{keyword:this.keyword},
                query:{k:this.keyword.toUpperCase()}
            })
        }

就是訪問keyword時需要this訪問，并且由于沒有ref以后也不需要加上value了