美文网首页
Vue-router参数传递

Vue-router参数传递

作者: 迷失的信徒 | 来源:发表于2022-04-15 09:55 被阅读0次

    URL
    协议类型://主机:端口/路径?查询
    Scheme://host:prot/path?query#fragment
    参数传递主要有一下两种方式

    1、params的类型

    这里可以以动态路由文章为例

    • 路由配置格式:/文件路径/:参数名
    • 传递的方式::to="'/文件路径/' + 变量"
    • 传递后形成的路径:/文件路径/变量值

    2、query的类型

    • 路由配置格式:就普通路由配置方式。
    • 传递的方式::to="{path:'/文件路径',query:所需要传递的对象}"
    • 传递之后形成的路径:/文件路径?对象中的key=对象中的value

    3、示例

    这里以user.vueprofile.vue为例

    3.1、路由配置
    5DDC0D4B6F8F7802AE16AEE49F42E5FE.jpg
    这里的userIduser.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>
    

    相关文章

      网友评论

          本文标题:Vue-router参数传递

          本文链接:https://www.haomeiwen.com/subject/ontasrtx.html