vue路由传参

路由传参有两种形式，params，和query。

以下为了使用router-view，使用的是嵌套父子路由，不使用嵌套路由传参方式一样。

路由

{
    path: '/lycc',
    name: 'lycc',
    component: lycc,
    children:[
      {
        path: '/lycc1/:tid',
        name: 'lycc1',
        component: lycc1
      },
      {
        path: '/lycc2',
        name: 'lycc2',
        component: lycc2
      },
      {
        path: '/lycc3',
        name: 'lycc3',
        component: lycc3
      },
      {
        path: '/lycc4',
        name: 'lycc4',
        component: lycc4
      }
    ]
  }

父路由

<template> <div><h1>路由传参</h1>
        <!-- http://localhost:8080/#/lycc1/123 -->
        <router-link to="/lycc1/123">路由传参params1</router-link><br/>
        <!-- http://localhost:8080/#/lycc2 -->
        <router-link :to="{name:'lycc2',params:{tid:123}}">(路由传参params2,地址栏不显示，刷新页面值会丢失)</router-link><br/>
        <!-- http://localhost:8080/#/lycc3?tid=123 -->
        <router-link :to="{path:'/lycc3',query:{tid:123}}">路由传参query1</router-link> <br/>
        <!-- http://localhost:8080/#/lycc4?tid=123 -->
        <router-link :to="{path:'/lycc4?tid=123',query:{}}">路由传参query2</router-link> <br/>
        ------------------------------------------------------------------------------------------<br/>
        <!-- http://localhost:8080/#/lycc1/123 -->
        <button @click = "params1('123')" >params传值1</button><br/>
        <!-- http://localhost:8080/#/lycc2 -->
         <button @click = "params2('123')">(params传值2,地址栏不显示，刷新页面值会丢失)</button><br/>
         <!-- http://localhost:8080/#/lycc3?tid=123 -->
         <button @click = "query1('123')" >query传值1</button><br/>
          <!-- http://localhost:8080/#/lycc4?tid=123 -->
         <button @click = "query2('123')" >query传值2</button><br/>
        <router-view></router-view>    </div>
</template>
<script>
  export default {
    methods:{
       params1(data){
            this.$router.push({
            path: "/lycc1/" + data
            });
       },
       params2(data){//地址栏不显示，刷新页面值会丢失
            this.$router.push({
                name: "lycc2",
                params: {
                    tid: data
                }
            });
       },
       query1(data){
            this.$router.push({
                path: "/lycc3?tid=" + data
            });
       },
       query2(data){
            this.$router.push({
                path: "/lycc4",
                query: {
                    tid: data
                }
            });
       }}}
</script>

子路由哦接收

Params接收使用:  {{this.$route.params.参数}}        

Query 接收使用: {{this.$route.query.参数}}