VueRuter路由组件传参

vue-router如何传递参数

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

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

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

比如在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中接收参数

  传递的名字是：{{$route.params.username}}
  

  如图：
  

  3.采用url传参

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

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

在App.vue组件里传递参数

About

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

id是:{{$route.params.id}}
title是:{{$route.params.title}}

结果如图：

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

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

//Main.vue
Go to Content

一：布尔模式：props:true

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

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

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

取代与 $route 的耦合

在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 是静态值的时候有用。

//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。这样你便可以将参数转换成另一种类型，将静态值与基于路由的值结合等等。

//创建 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组件间传参 参考文档