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.参数名来接受传递过来的值

巴特西

vue链接传参与路由传参

最新文章

热门文章