Vuejs2 如何使用vue路由器参数

我是vue的新手，现在正在使用它的路由器。 我想导航到另一个页面，并使用以下代码：

this.$router.push({path: '/newLocation', params: { foo: "bar"}});

那么我希望它会出现在新的组件上

this.$route.params

这不管用。 我还尝试：

this.$router.push({path: '/newLocation'});
this.$router.push({params: { foo: "bar"}});

我检查了一下源代码，发现这个属性会被新对象{}覆盖

我想知道params的用途和我想的不一样吗？ 如果没有，如何使用

---

提前感谢

将属性绑定到路由器通常不被认为是一种反模式吗

将它们绑定到自己的组件上是一种更为干燥的解决方案，我相信Vue路由器确实可以做到这一点。有关最佳实践的更多信息，请参见：此处

您能否尝试接受组件的props:[]属性中的属性？您可以在此处看到如何执行此操作：

---

如果您有任何问题，请务必弹出！很乐意提供进一步帮助。

因为您希望将参数传递给相应路由的组件，所以路由对象的path属性应该有一个动态段，由

：

表示，后跟params对象中的键的名称

所以你的路线应该是

routes: [
    {path: '/newLocation/:foo', name: 'newLocation', component: newComponent}
]

然后，为了以编程方式导航到组件，您应该执行以下操作：

this.$router.push({name: 'newLocation', params: { foo: "bar"}});

请注意，当您通过属性

params

传递参数时，我使用的是路由的

name

，而不是

path

如果要使用

路径

，则应为：

this.$router.push({path: '/newLocation/bar'});

通过路径方法，参数将自动映射到

$route.params

上的相应字段

---

现在，如果您在新组件中

console.log（this.$route.params）

，您将获得对象：

{“foo”：“bar”}

尝试使用query而不是params

this.$router.push({path: '/newpath', query : { foo: "bar"}});

在你的组件中

console.log(this.$route.query.foo)

---

我发现的最简单的方法是使用命名路由和params选项。假设您有一个如下所示的路由器文件：

并且您希望使用一些ID访问“电影”页面。您可以使用Vue的路由器链接组件（或Nuxt的链接组件）访问它，如下所示：

Vue：

{{item.title}

Nuxt:

{{item.title}

请注意，name参数必须与路由器文件中所需路由的“name”属性匹配。同样，参数名称必须匹配。

Nuxt在创建管线时自动为您创建管线文件 新页面。要查看Nuxt的路由名称，请转到.Nuxt 文件夹并查找“router.js”文件

---

我想将参数从一个视图传递到另一个视图。听起来不错。给路由一个名称，然后执行'this.$router.push（{path:'/newLocation'，name:'newRouteName'，params:{foo:'bar}}）；'完成此操作后，现在我可以通过以下方式访问新加载视图中的参数：$route.params。谢谢你的时间和努力！还有一件事，我看不出为什么它必须命名才能工作。你有什么想法吗？我不知道Vue router在2017年的工作方式是否有所不同，但现在Vue router需要在路由上使用

props:true

，甚至可以开始解析URL的

：foo

部分谢谢你的澄清，我错过了这个。$router.params。我假设在传递参数时，我可以在dataWorks下声明该参数时自动捕获该参数，但它会生成一个奇怪的URL。因为我正在传递一个对象，所以它显示

http://...?player=%5Bobject%20Object%5D

。有什么办法不让它那样做吗？@tazboy你找到解决办法了吗？我还使用一个对象作为路线的道具，在URL中，如果我的对象有“名称”字段，我希望在URL中显示它，而不是

%5Bobject%20bObject%5D

我使用localStorage存储我需要的内容，而不是使用query传递它。更容易使用。与其按路径，不如按名称，这样它就可以工作了。

<router-link :to="{ name: 'movie', params: { id: item.id } }">{{ item.title }}</router-link>

<nuxt-link :to="{ name: 'movie-id', params: { id: item.id } }">{{ item.title }}</nuxt-link>