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