Vue.router 的传参和其中“标签跳转传参“ 和 “js跳转传参“，不同步的问题，解决方法

本文链接：https://blog.csdn.net/lolhuxiaotian/article/details/121970675

<body>
    
    <div id="app">

        <router-link to="/aa">登录</router-link>
        <router-link to="/bb">注册</router-link>

        <router-view></router-view>
    </div>
    <template id="aa">
        <div>
            <h1>我是登录</h1>
        </div>
    </template>
    <template id="bb">
        <div>
            <h1>我是注册</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>

路由的传参和取参

1.在路由配置中去给相关组件配参，然后我们在路由跳转到的那个组件中去访问这些参数

结合 router-link 一起使用

(1).在路由中设置---配置--参数名称：

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

(2).在视图层设置---配置--给参数，赋的是是什么，要在 to属性里写清楚！！

 <router-link to="/aa/001">登录</router-link>

(3).在组件中的created生命周期函数中设置---获取（取参）：$route 路由信息对象,只读对象

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

获取uid并在页面显示（取参）：

 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>我是登录</h1>
            <p>我的uid为{{uid}}</p>
        </div>
    </template>

2.在router-link标签里去配参，然后我们在路由跳转到的那个组件中去访问这些参数

(1)在视图层设置---配置（传参）(!!注意：这种对象方式，to前面要加冒号)：

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

(2).在组件中的created生命周期函数中设置---获取（取参）：

let Bb = {
            template:`#bb`,
            data(){
                return {
                    id:''
                }
            },
            created(){
                console.log(this.$route);
                this.id = this.$route.query.id
            }
        }

 <template id="bb">
        <div>
            <h1>我是注册</h1>
            <h1>我的id为{{id}}</h1>
        </div>
    </template>

3.常用搭配：path--query name---params ---------------------------------------------

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

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

:to传参的属性里 query和name或path都可以 params是和name配对的，取参方式都是一样的

4.路由跳转传参---，其中"标签跳转传参" 和 "js跳转传参"，不同步的问题，解决方法：

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

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

此时两个按钮指向一个路由：

在视图层添加 :key="$route.fullPath"，设置如下：

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

注意：不同步：指定是数据不能传递到组件上,(或者数据组件接收不到传递过来的数据！！)

Vue.router 的传参 和其中“标签跳转传参“ 和 “js跳转传参“，不同步的问题，解决方法

路由的传参和取参

4.路由跳转传参---，其中"标签跳转传参" 和 "js跳转传参"，不同步的问题，解决方法：

Vue.router 的传参和其中“标签跳转传参“ 和 “js跳转传参“，不同步的问题，解决方法