vue.js - vue-router 组件传递参数问题

问题描述

问 题

您好，

我有一个疑问，就是在使用vue-router对组件进行传参的方法。
官方写的栗子时这样：

const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
})

这样我就可以在组件内通过$router.params 取得参数。
但是这样 我的组件就回依赖router，我的组件是个公共组件，不会只应用到一个页面（或者说在其他项目里也会用），我也不想让组件依赖vuex。就像使用props一样，在标签里指定参数:

<my_comp title="xxx" class-name="xxx"></my_comp>

请问下面这样的方式 如何传递参数，不通过路由地址，不通过vuex

const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

感谢您的关注！

解决方案

如果真的想用屬性來傳遞參數的話，可以放在 router-view 上：

<router-view :params="params"></router-view>

組件就可以透過 props 拿到參數，變成組件本身是靠著 props 取得數據，不依賴 router 或是 vuex，這樣父組件就可以用各種方式來傳遞給子組件：

例如現在是 vue-router 傳遞：

// 路由設置
const routes = [
  { path: '/foo', component: Foo, meta: { a: 'a' } },
  { path: '/bar', component: Bar, meta: { b: 'b' } }
]

// 父組件
<router-view :meta="$route.meta"></router-view>

// 子組件
const Foo = { props: ['meta'], template: '<div>foo{{ meta }}</div>' }
const Bar = { props: ['meta'], template: '<div>bar{{ meta }}</div>' }

實際例子：jsFiddle

这篇关于vue.js - vue-router 组件传递参数问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！