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)
    }
  }
}

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

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

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

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

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

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>

<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()}`)

{
        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()}
            })
        }

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()}
            })
        }