Vue-router路由传参（query与params）

路由传参

Vue-router路由传参主要有两种：

1、查询参数

使用对象{name:'path', query:{id:'213', data:'我是参数数据'}}

2、路由参数

使用对象{name:'path', params:{foo:'bar'}}，使用路由传参，需要在router路由配置的时候path属性内加入":参数名",如：

{path:'/register/:foo', name:'register', component:Register},其中的foo就是参数名。

3、如果使用查询传参，当同一个页面存在同一个路径跳转，但是参数不同时，如果使用<router-view></router-view>标签，进行跳转时，数据可能不刷新，因为<router-view></router-view>标签监听的是锚点（即路径不变，就认为没有变化，所以数据不刷新），此时需要将<router-view></router-view>修改成

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

<!DOCTYPE html>
<html>
    <head>
        <title>路由传参</title>
    </head>
    <body>
        <div id="app">
            <router-link :to="{name:'login', query:{id:'123'}}">登录</router-link>
            |
            <router-link :to="{name:'register', params:{foo:'bar'}}">注册</router-link>
            <button type="button"  @click="goLogin">去登录</button>
            <router-view :key="$route.fullPath"></router-view>
        </div>
        <script src="vue.js"></script>
        <script src="vue-router.js"></script>
        <script>
            var Login = {
                template:`<div>我是登录页面:{{id}}</div>`,
                data(){
                    return {
                        id: '',
                    }
                },
                created:function(){
                    this.id = this.$route.query.id;
                }
            };
            var Register = {
                template:`<div>我是注册页面, {{ foo }}</div>`,
                data(){
                    return {
                        foo:'',
                    }
                },
                created:function(){
                    this.foo = this.$route.params.foo;
                }
            };
            Vue.use('VueRouter');
            const router = new VueRouter({
                routes:[
                    {path:'/login', name:'login', component:Login},
                    {path:'/register/:foo', name:'register', component:Register},
                ]
            });
            new Vue({
                el:"#app",
                router,
                methods:{
                    goLogin(){
                        this.$router.push({name:'login', query:{id:'456'}})
                    }
                }
            })
</script>
    </body>
</html>

 4、query与params的区别

query要用path来引入，params要用name来引入，接收参数都是类似的，分别是this.route.query.id和this. route.query.id和this.route.query.id和this.route.params.id。

query更加类似于我们ajax中get传参，params则类似于post，说的再简单一点，query在浏览器地址栏中显示参数，params则不显示。

posted @ 2020-03-13 16:30  午亭爱成长  阅读(2793)  评论(0)  编辑  收藏  举报