URL
协议类型://主机:端口/路径?查询
Scheme://host:prot/path?query#fragment
参数传递主要有一下两种方式
1、params的类型
这里可以以动态路由文章为例
- 路由配置格式:
/文件路径/:参数名
。 - 传递的方式:
:to="'/文件路径/' + 变量"
。 - 传递后形成的路径:
/文件路径/变量值
。
2、query的类型
- 路由配置格式:就普通路由配置方式。
- 传递的方式:
:to="{path:'/文件路径',query:所需要传递的对象}"
。 - 传递之后形成的路径:
/文件路径?对象中的key=对象中的value
3、示例
这里以user.vue
和profile.vue
为例
3.1、路由配置
5DDC0D4B6F8F7802AE16AEE49F42E5FE.jpg这里的
userId
为user.vue
文件所传入参数的参数名,可以随便起,但原则上来说还是要与所传参数关联,如用户ID,可以起userId等。
3.2、值的传递
<router-link :to="'/user/' + userId">用户</router-link>//params类型
<router-link :to="{path:'/profile',query:{name:'why',age:18,height:180}}">档案</router-link>//query类型
也可以通过点击事件的形式来传递值。
<button @click="userClick">用户</button>
<button @click="profileClick">档案</button>
userClick(){
this.$router.push('/user/' + this.userId)
},
profileClick(){
this.$router.push({
path:'/profile',
query:{
name:'why',
age:17,
height:180
}
})
}
3.3、值的获取
这里就以user.vue
为例
<template>
<div>
<p>这里是用户的相关信息</p>
<h2>我是用户界面</h2>
<!-- //1、可以通过计算属性获取 -->
<p>{{userId}}</p>
<!-- //2、也可以通过route直接获取 -->
<p>{{$route.params.userId}}</p>
</div>
</template>
<script>
export default{
computed:{
userId(){
return this.$route.params.userId//这里获取到的是当前活跃的路由
}
}
}
</script>
<style>
</style>
网友评论