vue路由多种传参数

对应vue-router 编程式导航

主要是使用router.push({ name: 'user', params: { username: 'eduardo' } })，不能使用router的path

使用query，如果有多个path相同的query，需要把少的放在前面，或者使用name进行组装，在index.ts中有说明

index.ts

import { createRouter,createWebHistory,RouteRecordRaw } from "vue-router";

import Home from '../components/demo/Home.vue';

import About from '../components/demo/about.vue';

import FirstParam from '../components/demo/firstparam.vue';

import SecondQuery from '../components/demo/mutparam/secondquery.vue';

import SecondQuery2 from '../components/demo/mutparam/secondquery2.vue';

import ThirdParam from '../components/demo/mutparam/thirdparam.vue';

import { App } from "vue";

const routes: RouteRecordRaw[] =[

    {path:"/",name:'Home',component:() => import("../components/demo/Home.vue"),

        children:[

            {path:"/home/userhome",name:'UserHome',component:() => import('../components/demo/home/userhome.vue')},

            {path:"/home/useraddr",name:'UserAddr',component:() => import('../components/demo/home/useraddr.vue')}

        ]

    },

    {path:"/about",name:'About',component:About},

    {path:"/firstparam/:age/:name",name:'FirstParam',component:FirstParam},

   

    {path:"/secondquery",name:'SecondQuery',component:SecondQuery}, //这种和上面的那种都可以使用query模式

    {path:"/secondquery",name:'SecondQuery2',component:SecondQuery2},

    // {path:"/secondquery?name=:name&money=:money",name:'SecondQuery',component:SecondQuery},

    //  {path:"/secondquery",name:'SecondQuery',component:SecondQuery}, //这种和上面的那种都可以使用query模式,只是谁用这种模式必须写在SecondQuery2的前面，否者query2跳转路劲不对

    {path:"/thirdparam",name:'ThirdParam',component:ThirdParam}

]

const router = createRouter({

    history: createWebHistory(),

    routes

})

// export function setupRouter(app: App<Element>) {

//     app.use(router);

// }

export  { router }

second.vue

import { createRouter,createWebHistory,RouteRecordRaw } from "vue-router";

import Home from '../components/demo/Home.vue';

import About from '../components/demo/about.vue';

import FirstParam from '../components/demo/firstparam.vue';

import SecondQuery from '../components/demo/mutparam/secondquery.vue';

import SecondQuery2 from '../components/demo/mutparam/secondquery2.vue';

import ThirdParam from '../components/demo/mutparam/thirdparam.vue';

import { App } from "vue";

const routes: RouteRecordRaw[] =[

    {path:"/",name:'Home',component:() => import("../components/demo/Home.vue"),

        children:[

            {path:"/home/userhome",name:'UserHome',component:() => import('../components/demo/home/userhome.vue')},

            {path:"/home/useraddr",name:'UserAddr',component:() => import('../components/demo/home/useraddr.vue')}

        ]

    },

    {path:"/about",name:'About',component:About},

    {path:"/firstparam/:age/:name",name:'FirstParam',component:FirstParam},

   

    {path:"/secondquery",name:'SecondQuery',component:SecondQuery}, //这种和上面的那种都可以使用query模式

    {path:"/secondquery",name:'SecondQuery2',component:SecondQuery2},

    // {path:"/secondquery?name=:name&money=:money",name:'SecondQuery',component:SecondQuery},

    //  {path:"/secondquery",name:'SecondQuery',component:SecondQuery}, //这种和上面的那种都可以使用query模式,只是谁用这种模式必须写在SecondQuery2的前面，否者query2跳转路劲不对

    {path:"/thirdparam",name:'ThirdParam',component:ThirdParam}

]

const router = createRouter({

    history: createWebHistory(),

    routes

});

// export function setupRouter(app: App<Element>) {

//     app.use(router);

// }

export  { router }

secondquery2.ts

<template>

    <div>

        this is secondqeuery2

    </div>

</template>

thirdparam.vue

<template>

    <div class="">

        this is third param

        thirdname:{{$route.params.thirdname}}

        thirdmoney:{{$route.params.thirdmoney}}

    </div>

</template>

<script setup lang='ts'>

import { useRoute,useRouter } from 'vue-router';

</script>

<style lang='scss' scoped>

</style>

home.vue

<template>

    <div>

        <div>

            <NButton  @click="gotoAbout()"> about</NButton>

            <NButton  @click="gotoFirst()"> firstparam</NButton>

            <NButton  @click="gotoSecondQuery()"> secondquery</NButton>

            <NButton  @click="gotoSecondQuery2()"> secondquery2</NButton>

            <NButton  @click="gotoThirdparam()"> thirdparam</NButton>

            <br/>

             <router-link to="/home/userhome">userhome</router-link><br/>

             <router-link to="/home/useraddr">useraddr</router-link><br/>

            <router-view>

            </router-view>

        </div>

    </div>

</template>

<script setup lang="ts">

    import {NButton,NDialogProvider,useDialog } from 'naive-ui';    

    import { useRoute,useRouter } from 'vue-router';

    const router = useRouter();

    const route = useRoute();

    const dialog = useDialog();

    function gotoAbout(){

        console.log(router);

        console.log(route);

        dialog.info({

            title:'gotoAbout1'

        });

        // router.push("/about");

        router.replace("/about");

    }

    function gotoFirst(){

        router.push("/firstparam/20/wang");

    }

    function gotoSecondQuery(){

        router.push({name:'SecondQuery',params:{name:'wang',money:3400}})

    }

    function gotoSecondQuery2(){

        router.push("/secondquery")

    }

    function gotoThirdparam(){

        router.push({name:'ThirdParam', params:{thirdname:'zhangsan',thirdmoney:50000}})

        // router.push({path:'/thirdparam', params:{thirdname:'lisi',thirdmoney:'dfefe'}})  使用param传参数，不能使用path了，只能使用name来找到地址

    }

</script>

这篇好文章是转载于：学新通技术网