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即可