首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue3路由跳转与参数获取

Vue3之路由跳转与参数获取方式

2023-05-18 15:56:08 作者：叶子_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方法，可以实现路由的跳转（可以书写一些自己的业务）

示例：

点击logo按钮，跳转到home页（声明式）

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

点击搜索按钮，执行跳转（ 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了

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。