current position：Home>Vue. The parameter transfer of router is out of synchronization between "tag jump parameter transfer" and "JS jump parameter transfer", and the solution

Vue. The parameter transfer of router is out of synchronization between "tag jump parameter transfer" and "JS jump parameter transfer", and the solution

2022-01-26 23:36:52 【huxiaoxiao.】 

<body>
    
    <div id="app">

        <router-link to="/aa"> Sign in </router-link>
        <router-link to="/bb"> register </router-link>

        <router-view></router-view>
    </div>
    <template id="aa">
        <div>
            <h1> I am logging in. </h1>
        </div>
    </template>
    <template id="bb">
        <div>
            <h1> I'm registered </h1>
        </div>
    </template>
    <script src="./js/vue2.6.14.js"></script>
    <script src="./js/vue-router.js"></script>
    <script>
        let Aa = {
            template:`#aa`,
        }
        let Bb = {
            template:`#bb`
        }
        Vue.use(VueRouter)
        let router = new VueRouter({
            routes:[
                {
                    path:'/aa',
                    name:'Aa',
                    component:Aa
                },
                {
                    path:'/bb',
                    name:'Bb',
                    component:Bb
                }
            ]
        })
        let vm = new Vue({
            el:'#app',
            router,
            components: {
                aa,
                bb
            }
        })
    </script>

Pass and take parameters of the route

1. In routing configuration Go and give it to Related components Matching parameter , And then we were in The route jumps to In that component To visit These parameters

combination router-link Use it together

(1). Set... In the route --- To configure -- Parameter name ：

routes:[
                {
                    path:'/aa/:uid',
                    name:'Aa',
                    component:Aa
                }
            ]

(2). Set... At the view level --- To configure -- Give parameters , Fu is What is it? , To be in to In the attribute Write clearly ！！

 <router-link to="/aa/001"> Sign in </router-link>

(3). In components created Set... In the lifecycle function --- obtain （ Taking ginseng ）：$route Routing information object , Read only objects 

 let Aa = {
            template:`#aa`,
            created(){
                console.log(this.$route);
            }
        }

  obtain uid And on the page （ Taking ginseng ）：

 let Aa = {
            template:`#aa`,
            data(){
                return {
                    uid:''
                }
            },
            created(){
                console.log(this.$route);
                console.log(this.$route.params);
                this.uid = this.$route.params.uid
            }
        }
<template id="aa">
        <div>
            <h1> I am logging in. </h1>
            <p> my uid by {
   {uid}}</p>
        </div>
    </template>

2. stay router-link In the label To match parameters , And then we were in The route jumps to In that component To visit These parameters  

(1) Set... At the view level --- To configure （ The ginseng ）(!! Be careful ： This object mode ,to Put a colon in front )：

 <router-link :to="{name:'Bb',query:{id:'001'}}"> register </router-link>

(2). In components created Set... In the lifecycle function --- obtain （ Taking ginseng ）：

let Bb = {
            template:`#bb`,
            data(){
                return {
                    id:''
                }
            },
            created(){
                console.log(this.$route);
                this.id = this.$route.query.id
            }
        }
 <template id="bb">
        <div>
            <h1> I'm registered </h1>
            <h1> my id by {
   {id}}</h1>
        </div>
    </template>

 3. Common collocation ：path--query name---params ---------------------------------------------

<router-link :to="{path:'aa',query:{color:'red'}}" />

<router-link :to="{name:'Bb',params:{color:'red'}}" />

:to In the properties of the parameter query and name or path Fine params Is and name Paired , The way of taking parameters is the same

4. Route jump parameter transfer ---, among " Tag jump pass parameter " and "js Jump and pass parameters ", Out of sync problem , resolvent ：

 <router-link :to="{name:'God',query:{id:001,name:' Apple '}}"> Fruits </router-link>
        <button @click="gogod"> Fruits </button>

 methods:{
                gogod(){
                    this.$router.push({path:'/god',query:{id:'2',name:' Banana '}})
                }
            }

At this point, the two buttons point to a route ：

On the view level add to :key="$route.fullPath", Set as follows ：

 <router-view :key="$route.fullPath"></router-view>

Be careful ： Out of sync ： The designation is data You can't Pass on to Components ,( Or data Components Can't receive Data passed in ！！)

copyright notice
author[huxiaoxiao.],Please bring the original link to reprint, thank you.
https://en.cdmana.com/2022/01/202201262336498820.html

The sidebar is recommended

guess what you like

Random recommended