Vue之嵌套router传参params与query

vue嵌套路由中父组件向子组件传递路由可以通过传参的方式，传参有params与query两种方式。

一、params传参会在地址栏隐藏参数，与ajax的post请求极为相似，用法上不能用path来定义路径，要通过name来定义，用法如下：

router.js代码：

import Vue from 'vue'
import Router from 'vue-router'
import trade from '@/components/pages/trade'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/trade',
      name: 'trade1',
      component: trade
    }
  ]
})

App组件代码：

<template>
  <div id="app">
    <router-link :to="{name:'trade1',params:{name:'user'}}">跳转按钮</router-link>
    <router-view></router-view>
  </div>
</template>

trade组件，打印出传递的参数：

<template>
  <div>
    <span>{{this.$route.params.name}}</span>
  </div>
</template>

二、query传参还是用path定义路径，地址栏显示参数不太安全，类似ajax的get请求

使用上只需要把上面的params改成query，name改成path即可