zoukankan      html  css  js  c++  java
  • vue链接传参与路由传参

    1、链接传参:

      例如:链接是:http://localhost:3333/#/index?id=001

      我们要获取参数:console.log(this.$route.query.id);即可

    2、路由传参:

      (一、显示在url中)

      main.js params传值是通过 :[参数值] 如path: "/home/game/:num"

        例:

    { 
        path: "/home", component: home, 
        children: [ 
          { path: "/home/game/:num", component: game } 
        ] 
      } 

      父组件路由跳转写法:

        :to="{path:'/game/'+item.Id}"

      子组件取路由参数:

        通过 this.$route.params.参数名来接受传递过来的值

      (二、不显示在url中):这种方法再刷新页面后参数消失,不建议使用

        只需将上面的main.js中的定义路由改为如下样子,在子路由中通过name来给路径其一个game1的别名。

          

    //定义路由
    const routes = [
      { path: "/", redirect: "/home" },//重定向
      {
        path: "/home", component: home,
        children: [
          { name: "game1", path: "/home/game/", component: game } 
        ]
      }
    ]

        home.vue 中router-link修改为:to="{ name:'game1', params: {num: 123} }" params中是要传递的参数,这样传递的参数就不会显示在url中。

      

    <template>
      <div>
        <h3>首页</h3>
        <router-link :to="{ name:'game1', params: {num: 123} }"> 
          <button>显示</button>
        </router-link>
        <router-view></router-view>
      </div>
    </template>

      

     子组件取路由参数:

          通过 this.$route.params.参数名来接受传递过来的值

  • 相关阅读:
    JavaWeb--HttpSession案例
    codeforces B. Balls Game 解题报告
    hdu 1711 Number Sequence 解题报告
    codeforces B. Online Meeting 解题报告
    ZOJ 3706 Break Standard Weight 解题报告
    codeforces C. Magic Formulas 解题报告
    codeforces B. Sereja and Mirroring 解题报告
    zoj 1109 Language of FatMouse 解题报告
    hdu 1361.Parencodings 解题报告
    hdu 1004 Let the Balloon Rise 解题报告
  • 原文地址:https://www.cnblogs.com/LChenglong/p/8110251.html
Copyright © 2011-2022 走看看