Vue路由中 query和params传参

最新推荐文章于 2024-04-03 17:43:25 发布

sxs7970

最新推荐文章于 2024-04-03 17:43:25 发布

阅读量690

点赞数

分类专栏：前端 JavaScript Vue.js 文章标签： query params vue-router 传参

本文链接：https://blog.csdn.net/sxs7970/article/details/88549660

版权

前端同时被 3 个专栏收录

132 篇文章 2 订阅

订阅专栏

Vue.js

37 篇文章 0 订阅

订阅专栏

JavaScript

10 篇文章 0 订阅

订阅专栏

vue-router 中 query和params传参

两者有区别，直白点就是：query相当于get请求，页面跳转的时候，可以在地址栏看到请求参数；而params相当于post请求，参数不会再地址栏中显示

1.query

地址栏：
在这里插入图片描述

<div id='app'>
        <!-- 如果子啊路由中，使用 查询字符串，给路由传递参数，则不需要修改 路由规则的 path 属性 -->
        <router-link to="/login?id=10&name=zs">登录</router-link>
        <router-link to="/register">注册</router-link>
        <router-view></router-view>
    </div>

var router = new VueRouter({
            routes: [{
                path: '/login',
                component: login
            }, {
                path: '/register',
                component: register
            }]
        })

完整的：

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <meta http-equiv='X-UA-Compatible' content='ie=edge'>
    <title></title>
    <script src='../lib/vue.js'></script>
    <script src="../lib/vue-router.js"></script>
</head>
<body>
    <div id='app'>
        <!-- 如果子啊路由中，使用 查询字符串，给路由传递参数，则不需要修改 路由规则的 path 属性 -->
        <router-link to="/login?id=10&name=zs">登录</router-link>
        <router-link to="/register">注册</router-link>
        <router-view></router-view>
    </div>

    <script>
        var login = {
            template: '<h1>登录 ---{{this.$route.query.id}}--{{$route.query.name}}</h1>',
            data() {
                return {
                    // msg:this.$route.query.id
                    msg: '123'
                }
            },
            created() { //组件的生命周期钩子函数
                console.log(this.$route);
                console.log(this.$route.query.id)

            }
        }
        var register = {
            template: '<h1>注册</h1>'
        }
        
        var router = new VueRouter({
            routes: [{
                path: '/login',
                component: login
            }, {
                path: '/register',
                component: register
            }]
        })
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {},
            router: router
        });
    </script>
</body>

</html>

2.params

地址栏：
在这里插入图片描述

<div id='app'>
        <!-- 如果在路由中，使用 查询字符串，给路由传递参数，则不需要修改 路由规则的 path 属性 -->
        <router-link to="/login/12/李四">登录</router-link>
        <router-link to="/register">注册</router-link>
        <router-view></router-view>
    </div>

   var router = new VueRouter({
            routes: [{
                path: '/login/:id/:name', //只在这里传参，而上边router-link不传对应的参数，则路由匹配不到，不会显示
                component: login
            }, {
                path: '/register',
                component: register
            }]
        })

sxs7970

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
Vue路由中 query和params传参

vue-router 中 query和params传参两者有区别，直白点就是：query相当于get请求，页面跳转的时候，可以在地址栏看到请求参数；而params相当于post请求，参数不会再地址栏中显示1.query地址栏：&lt;div id='app'&gt; &lt;!-- 如果子啊路由中，使用查询字符串，给路由传递参数，则不需要修改路由规则的 path ...
复制链接

扫一扫