VueRuter路由组件传参

vue-router如何传递参数

vue-router传递参数有三种方法：

1. 使用name传递；之前在配置路由的时候，出现一个name属性，但是不知道具体有什么用，在路由中它可以用来 传递参数。在router.js中将路由都写好。

   接收参数： 在我们需要接收它的页面里添加：

   <!--App.vue-->
   <template>
     <div id="app">
         <!-- 路由出口 -->
         <!-- 路由匹配到的组件将渲染在这里 -->
         <p>我是router-name:{{$route.name}}</p>
       <router-view></router-view>
     </div>
   </template>
   

比如在APP.vue中接收的，我希望切换每个页面都能看见每个页面各自的参数。如图

2.to来传递

1.利用router-link 中的to来传参，看语法：

<router-link v-bind:to="{name:'xxx',params:{key:value}}"></router-link>

• 首先：to需要绑定；

• 传参使用类似与对象的形式；

• name就是我们在配置路由时候取的名字；

• 参数也是采用对象的形式

  1.实际操作一下：

  <router-link v-bind:to="{name:'about',params:{username:'rainy'}}">关于我</router-link>
  

  这里我们注意to的写法，前面加了冒号，因为那是绑定的，传递一个username过去，值为rainy

  2.在about.vue中接收参数

  <p>传递的名字是：{{$route.params.username}}</p>
  

  如图：
  

  3.采用url传参

  通过设置props的值来实现路由传参的一种形式。根据props的值的类型，可以分为三种传参形式布尔模式、对象模式、函数模式

  修改router.js里的path，这里我们修改about.vue组件
  

在App.vue组件里传递参数

<router-link to="/about/1/about">About</router-link>

在about.vue组件里显示我们要展示的内容（接收参数）

<a>id是:{{$route.params.id}}</a>
<a>title是:{{$route.params.title}}</a>

结果如图：

阅读vue官方文档，总结的路由组件传参

在vue组件中使用，以下三种模式都可以：

//Main.vue
<router-link to="/Bar">Go to Content</router-link>

一：布尔模式：props:true

如果 props 被设置为 true，route.params 将会被设置为组件属性。

在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。

使用 props 将组件和路由解耦：

取代与 $route 的耦合

<!--Bar.vue-->
<template>
    <div id="bar">
        <h1>BAR</h1>
        <!--直接用花括号取值-->
        <a>id是:{{id}}</a>
        <br>
        <a>title是:{{title}}</a>
    </div>
</template>

<script>
    export default {
        name: "Bar",
        props:["id","title"],
    }
</script>

在router/index.js中进行解耦：

//router/index.js
//创建 router 实例
export default new VueRouter({
    mode: 'history',
    routes:[//配置路由，这里是个数组，每一个连接都是一个对象
        {
            path: "/", //路径，就是打开localhost:8080一样，# 后面接的名称
            name: "main", //路由名称
            component:Main //对应的组件模板
        },
        {
            path: "/Bar/:id/:title",
            props: true,//解耦 如果 props 被设置为 true，route.params 将会被设置为组件属性。
            name: "bar",
            component: Bar
        },
    ]
});

二、对象模式：props:Object

如果 props 是一个对象，它会被按原样设置为组件属性。当 props 是静态值的时候有用。

<!--Content.vue-->
<template>
    <div id="content">
        <h1>Content</h1>
        <p>{{userName}}</p>
        <br/>
        <p>{{userage}}</p>
    </div>
</template>

<script>
    export default {
        name: "Content",
        props:['userName','userage'],
    }
</script>

//router/index.js
//创建 router 实例
export default new VueRouter({
    mode: 'history',
    routes:[//配置路由，这里是个数组，每一个连接都是一个对象
        {
            path: "/", //路径，就是打开localhost:8080一样，# 后面接的名称
            name: "main", //路由名称
            component:Main //对应的组件模板
        },
        {
            path: "/Con",
            props: { userName: 'LiMing',userage:"20"},//props为对象
            name: "con",
            component: Con
        },
    ]
});

二、函数模式：props:Function

你可以创建一个函数返回 props。这样你便可以将参数转换成另一种类型，将静态值与基于路由的值结合等等。

<!--Foo.vue-->
<template>
    <div id="foo">
        <h1>FOO</h1>
        <p>名字是：{{username}}</p>
        <p>年龄是：{{userage}}</p>
    </div>
</template>

<script>
    export default {
        name: "Foo",
        props:["username","userage"],
    }
</script>

//创建 router 实例
export default new VueRouter({
    mode: 'history',
    routes:[//配置路由，这里是个数组，每一个连接都是一个对象
        {
            path: "/", //路径，就是打开localhost:8080一样，# 后面接的名称
            name: "main", //路由名称
            component:Main //对应的组件模板
        },
        {
            path: "/Foo",
            props:()=>{//函数模式
                return {
                    username : "LiMing",
                    userage : 26
                }
            },
            name: "foo",
            component: Foo
        },
    ]
});

感谢：vueRouter组件间传参 参考文档