19 使用路由传递参数（query方式）02

最新推荐文章于 2023-11-01 14:04:25 发布

原创最新推荐文章于 2023-11-01 14:04:25 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#VueRouter使用query

Vue 专栏收录该内容

29 篇文章

订阅专栏

本文聚焦VueRouter的query参数传递，介绍如何在模板中通过$route.query获取参数，并探讨通过to链接传递params的方式。同时，解释了router-view作为路由匹配容器的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

划重点

路由：VueRouter基础
路由传参
- 通过query ：在template中：$route.query.id (id对应 params中的id)
- 通过to指向对应的params：参数拼接;
- router-view:可以看做是用来显示路由匹配规则的容器(必不可少)

梅菜扣肉一大份

<!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>Document</title>
    <script src="./lib/vue-2.6.10.js"></script>

    <!-- 这里引入的路由要依赖在vue下；所以应该加载在 vue 后面
    当我们安装（引用）了这个路由后；这个时候 我们的html就有了一个路由的构造函数(通过new 构造)的使用了：
    var router = new VueRouter()
    
    -->
    <script src="./lib/vue-router.js"></script>
</head>

<body>
    <div id="app">
<!-- 第一种 路由传参
步骤：
1:定义 一个基础组件：只包含 templater
2:构造一个路由：var rouObj = new VueRouter({   })
3:在Vue种注册这个这个路由：和 方法 methods 同级 ，router:rouObj (router是固定的写法：关键词   ，rouObj就是我们定义的路由)
4:在路由 rouObj 中添加 路由规则：就是routes (注意⚠️这里和Vue中的关键词router不是同一个单词)  其中：path 对应 URL中的指向 地址（Hash） ,component:指的是 对应的组件的 名称 和 步骤1 对应 ️
5：在 Vue 的 div种 添加 路由的容器：<router-view>
6:在 Vue的div中通过 <router-link> 通过 属性：to  指定对应步骤4 的path部分；；

    上面的就是使用的步骤：没用参数的传递；只是组件的调用
   第一中方式：传递参数：query   
7:在 步骤 6  中的 to中对 指向 通过 ？ 拼接参数的 键值对 : （如：to="/login?id=11"）通过 ？ 链接 这个时候健是：id ；值：11
8:在 路由（也即是步骤 2 中 ） 的 created的初始化函数中 通过：this.$route.query.参数的健 ； （也就是：this.$route.query.id）

   第二中方式：传递参数：params 
9: 首先在 路由 rouObj（步骤2中） 的routes 路由规则中的path 的指向的地址后面添加 参数：
如这是初始化的定义： { path: '/login', component: denglu1 }  在path 添加两个参数：id ;name 后
 { path: '/login/:id/:name', component: denglu1 }   //这里的id 和 name 是参数元素；其中通过链接的冒号(:)是一个占位符
 那么在 Vue的div中的 对规则使用的 <router-link> 中 通过在
     初始化：<router-link to="/login ">点击登陆</router-link>
    的基础上添加传递的参数：
<router-link to="/login/12/'旺旺' ">点击登陆</router-link>
其是通过斜横 / 进行参数的拼接
10:和 8 的步骤位置一样 只是其是通过 this.$route.params.参数的健 添加的 ；（如：this.$route.params.name）


总结： 多观察 网页中的 --》 检查 --》 通过 在控制台输入：vm 观察其中属性携带的参数  这样理解更清晰

-->
   
        <!--  在 to指定 的路径后面添加参数 ；并在组件中使用  -->

        <!-- 总结： 多在网页中通过 检查 后在控制台 输入 vm 观察其中的参数 -->
        <router-link to="/login?id=10&name='旺旺' ">点击登陆</router-link>
     
        <!-- 这里的 router-view 标签是Router提供的；可以看作是一个占位符； 将来 路由规则将匹配到的组件 展示到这个 router-view 容器中 -->
        <router-view></router-view>

    </div>




    <script>

        var denglu1 = {
            template: '<h3>登陆---{{msg}}---{{$route.query.id}}---{{$route.query.name}}</h3>',
            data() {
                return {
                    msg: '我是组件中的信息～～～'

                }
            },
            created(){//组件生命周期中的钩子函数（可以参考Vue的周期函数）
                //this:代表当前组件；在 template中可以使用的话；可以省略
               // 总结： 多在网页中通过 检查 后在控制台 输入 vm 观察其中的参数  
             alert(this.$route.query.id)


            }
        }
   
        var rouObj = new VueRouter({
            //route:这个配置对象中的 route 表示 【路由匹配规则】 的意思 
            routes: [
                //路由匹配规则： 
                //属性1:path:表示要监听的这个链接地址；如下面?登陆的说明；
                //在使用 redirect重定向的时候 ；就是默认加载path对应的 默认的规则是redirect中的使用规则
                //那么?下面{path:'/',redirect:'/login'}  意思就是：当这个网页中没有路由对应的要指向的规则的时候 ；默认使用的是 login 的规则；；（paht中表示为空；表示没有使用的定义规则）
                { path: '/', redirect: '/login' },// 使用 redirect:是重定向；； 
                // 属性1:path：表示 要监听的这个链接地址：如 该text.html在网页中打开的链接是： xxx/test.html ;
                //那么当使用path这个规则地址后其访问的地址就是：xxx/test.html#/login
                { path: '/login', component: denglu1 } //  总结： 多在网页中通过 检查 后在控制台 输入 vm 观察其中的参数 
            



            ]



        })

        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {

            },
            router: rouObj   // 注册路由：将路由规则注册对象；注册到vm实例上；用来监听Url地址的改变；然后通过容器<router-view>展示


        })


    </script>

</body>

</html>