零基础学习Vue: 第36课 query与params传值的区别：

程序员文章站 2022-04-24 09:48:05

...

query：url后面会显示传递值的内容
params： url后面会不会显示传值内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <!-- 8.设置路由点击跳转事件 -->
    <button @click="goHome">首页</button>
    <button @click="goUser">用户中心</button>
    <button @click="goBack">返回上一页</button>
    
    <!-- router-view跳转显示的页面组件 -->
    <router-view></router-view>
</div>

<!-- 引入vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 引入vue-router -->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<script>
    //2.定义子组件home
    let home = {
        template:'<div>首页</div>',
        created(){
            console.log(this.$route.query)
        }
    }

    //3.定义子组件user
    let user = {
        template:'<div>用户中心</div>',
        created(){
            console.log(this.$route.params)
        }
    }

    //4.设置路由和组件的映射表
    let routes = [  //路由和组件的映射表
        {path:'/home',name:'homelink',component:home},
        {path:'/user',name:'userlink',component:user},
        //redirect  重定向 默认路由
        {path:'*',redirect:'/home'}
    ];

    //5.实例化路由对象
    let router = new VueRouter({
        routes
    })

    //1.创建根组件
    let vm = new Vue({
        el:'#app',
        router, //6.注册路由
        methods:{
            //7.定义$router路由方法
            goHome(){
                this.$router.push({
                    path:'/home',
                    query:{a:1,name:'首页'}
                })
            },
            goBack(){
                // this.$router.back()
                this.$router.go(-1)     //返回上一页
            },
            goUser(){
                this.$router.push({
                    // path:'/user',    //不能用path引入路由
                    name:'userlink',    //使用name引入路由
                    params:{    //params只能使用name引入路由
                        id:2,
                        name:'用户页面'
                    }
                })
            }
        }
    })
</script>
</body>
</html>

运行结果如下：

点击首页时：
零基础学习Vue: 第36课 query与params传值的区别：
点击用户中心时:

零基础学习Vue: 第36课 query与params传值的区别：

运行结果如下：

零基础学习Vue: 第35课 query与params的用法：

零基础学习Vue: 第36课 query与params传值的区别：