VUE3路由传参数

叁歲伎倆 2022-09-07 14:38 289阅读 0赞

字符串传参数：

> 通过<router-link>的to顺序传递参数
> 
> 俩种方式：  
> 1、查询字符串  
> 2、Rest风格传参数

> 字符串形式：  
> 语法：to="路径?参数名=参数值&参数名=参数值"
> 
> 对向形式：  
> 语法： ：to="\{path:"组件的url路径"，query：\{key:value,key:value\}\}"  
> 或  
> ：to="\{name:"组件的路由名称"，query：\{key：value，key：value\}"
> 
> 使用路由对象vm.$route.query获取参数信息  
> 路由对象$route,表示当前激活的路由的状态信息，称为激活路由信息对象  
> 该对象为所有组件共享的实例属性，在所有组件中都可以通过this.$route访问，且访问的都是同一对象

> **该对象中存储着当前激活路由的相关信息 :**
> 
> ![20210823223113734.png][]

路由的元信息：meta\{\}

{
    			path:'login',//相对路径（不以/开头），相对于上一层的位置
    			name:'login',
    			component:() => import('../views/login.vue')
    		    meta:{
    				msg:'hello',
    				flag:true
    			}
    		},

获取元信息：

> console.log(this.$route.meta.msg)

<router-link :to='{
    				path:"/user/login",
    				query:{
    					username:htt,
    					password:1234
    				}
    			}'>用户登录</router-link>

![20210823222749530.png][]

Rest风格传递参数：

<router-link to="/user/register/lili/20/man">用户注册</router-link>

index.js

{
    			path:'/user/register/:name/:age/:sex', //绝对路径
    			name:'register',
    			component:() => import('../views/register.vue')
    		}

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZWhlYzIwMTA_size_16_color_FFFFFF_t_70][]

rest风格对象传递参数：

<router-link :to="{
    				name:'register',
    				params:{
    					name:'htt',
    					age:20,
    					sex:'男'
    				}
    				
    			}">用户注册</router-link>

index.js

{
    			path:'/user/register/:name/:age/:sex', //绝对路径
    			name:'register',
    			component:() => import('../views/register.vue')
    		}

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZWhlYzIwMTA_size_16_color_FFFFFF_t_70 1][]

解决一个bug：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZWhlYzIwMTA_size_16_color_FFFFFF_t_70 2][]

在所在文件夹的开头添加：

> /\* eslint-disable \*/

![20210823225523945.png][]

[20210823223113734.png]: /images/20220829/acbbd64bc4ad4503a3b8cadb5e9023f5.png
[20210823222749530.png]: /images/20220829/13fc642d5b61435d9aa5f7a8bb7bacac.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZWhlYzIwMTA_size_16_color_FFFFFF_t_70]: /images/20220829/b58dd92fd02e4e4c9580cf3befa39797.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZWhlYzIwMTA_size_16_color_FFFFFF_t_70 1]: /images/20220829/04defe50e52646ffb0015895ac0bac65.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZWhlYzIwMTA_size_16_color_FFFFFF_t_70 2]: /images/20220829/af03c2752e554ec9893c1cd4b77aa64b.png
[20210823225523945.png]: /images/20220829/5edb0fab38ce4ad4af478bc101e1dee6.png