带参数路由器配对

文中已经参与「 . 」

带参数路由器配对,其要求通常是:当要将给出组排的路由器映射到同一个部件,但其需要数据库的目标受众不一样如ID不同,网页页面主要参数不一样这些时。在 Vue Router 中,大家可以在途径中使用一个动态字段来达到,其实就是传到途径主要参数

一、query传送/接受途径主要参数
1、两种形式

(1)方法

router.push({
            name: 途径别称(如home,about,login),
            query: {
        //途径参数key:途径参数value,能够传送一个或是好几个
                username: 'catt',
        gender:'male'
            }
})

(2)方法二

router.push({
            path: 途径(如/home,/about,/login),
            query: {
                //途径参数key:途径参数value,能够传送一个或是好几个
               username: 'catt',
               sex:'female'
            }
})

应用path query与使用name query的区别在于:根据name方法自动跳转页面在更新以后,主要参数会无效,而path方法主要参数不容易无效,能被保存。

2、router-link

<router-link to="xxx"></router-link>标识可能呈现一个含有恰当 href 属性 <a href="xxx"></a> 标识。router-link自动跳转的路线可以不用必须在路由器处配备。应用router-link部件开展导航栏,根据to特性去执行连接,还要一个路由器出入口,即router-view,路由器获取到的部件也将3D渲染在这儿。

3、router.push()

程序编写式导航栏,即router.push(location,onComplete?,onAbort?),这样的方式会往history栈加上一个新的纪录,那样的话就容易出现返回按键,能够回到来临时的途径。在vue3中,并没有this,因此无法使用this.$route.params,但是能够通过引入useRouter,useRoute来用,在其中,

router是路由器实际操作目标,只写目标,及其自动跳转主要参数;route是路由信息目标,写保护目标,接受传送的路线主要参数

实际上,router不仅仅有push方式,也有router.go(),router.replace()。 举例说明如下所示:

(1)传递参数

//home网页页面
<button @click="toAbout">Go to AboutView</button>

<script setup lang="ts">
    import {
        useRouter
    } from 'vue-router';
    const router = useRouter()
    const toAbout = () => {
        router.push({
            name: 'about',
            query: {
                username: 'catt'
            }
        })
    }
</script>

(2)接受主要参数

//about网页页面
<script setup lang="ts">
    import {
        useRoute
    } from 'vue-router';
    import {
        onMounted
    } from 'vue';
    const route = useRoute()
    onMounted(() => {
        console.log(route.query);
    })
</script>

根据query传递参数,主要参数一般是以'?'方式拼凑在途径后边,假如主要参数有好几个,则主要参数与参数之间通过'&'开展拼凑。详细途径为:xxxxxxxxxx/about.username?username=catt

传送一个途径主要参数,如下图所示:

router

传送好几个途径主要参数时。如下图所示:

router

二、params传送/接受途径主要参数

假如带来了path,patams能被忽视。因此,根据params传递参数,仅有一种方式

router.push({
            name: 途径别称(如home,about,login),
            params: {
        //途径参数key:途径参数value,能够传送一个或是好几个
                username: 'catt',
        gender:'male'
            }
})

在其中,路由配置path:"/about/:username"或是path:"/about.username"

在路由器当中配备path里的主要参数username第一次可要求,刷新页面username就消失了

在路由器中配备path里的主要参数username刷新页面username会保存

1、router-link

router-link中连接假如是'/'逐渐,也是从根路由器逐渐,则在路由配置的path;如果开始没有'/',则代表的是以现阶段路由器逐渐,其实就是现阶段路由器的子路由,路由器的子路由配备中path不需要'/'。

举个简易事例: 当前页所属路由器为 /app/home,在设置router-link连接的情况下,

{path:'about'} 自动跳转后网页页面所属路由器为 /home/about,配备在某一个路由器的子路由里

{path:'/about'} 自动跳转后网页页面所属路由器为 /about

2、router.push()

(1)传递参数

//home网页页面
<script setup lang="ts">
    import {
        useRouter
    } from 'vue-router';
    const router = useRouter()
    const toAbout = () => {
        router.push({
            name: 'about',
            params: {
                username: 'dogg'
            }
        })
    }
</script>

(2)接受主要参数

<script setup lang="ts">
    import {
        useRoute
    } from 'vue-router';
    import {
        onMounted
    } from 'vue';
    const route = useRoute()
    onMounted(() => {
        console.log(route.params);
    })
</script>

(3)必须路由器相互配合,表明主要参数

{
            path: '/about/:username',
            name: 'about',
            component: () => import('../views/AboutView.vue')
}

根据params传递参数,必要时在途径表明主要参数,就需要路由器相互配合,是指将params也当成是路由器的参数;不然,再也不会途径上显示。详细途径:xxxxxxxxxxxxxxx/about/dogg

传送一个主要参数时,如下图所示:

router

有兴趣的朋友,可以自己检测params拒不配合路由器应用,及其path params会有什么样的结果。

三、汇总

query和params传参的差别:

(1)query

应用name query或是path query传送途径主要参数,能用path或是name两种形式来引进路由器。 query是拼凑在url后边的参数,并没有传参也能正常表明网页页面,query等同于get要求,网页跳转时,还可以在搜索框见到请求参数,

(2)params

应用name params传送途径主要参数,只能用name来引进路由器,假如编写成path,或忽视params传送的参数,那样接受参数界面的结论将是undefined。 params传参自动跳转后,接收到的主要参数无法显示在路由器上,假如刷新页面,主要参数就消失了;可是如果要更新保存主要参数,能通过相互配合路由器应用,将params当做路由器的一部分,在路由器后边立即加上参数名。params等同于post要求,主要参数不能在搜索框上显示,仅有params和路由结合使用才能在搜索框见到传递参数。

声明:本文仅供个人学习使用,来源于互联网,本文有改动,本文遵循[BY-NC-SA]协议, 如有侵犯您的权益,请联系本站,本站将在第一时间删除。谢谢你

原文地址:router