在VueJS中访问$ route.params [英] Accessing $route.params in VueJS

问题描述

浏览本文档：
https://router.vuejs.org /en/essentials/navigation.html

看起来您可以绑定< router-link：to = variableName >链接文本< / routerlink> 这很漂亮；但是，在尝试访问要构建的组件内部的路由参数时遇到了一些麻烦。

It looks like you can bind the <router-link :to="variableName">Link Text</routerlink> Which is pretty nifty; however, I've had some trouble trying to access route parameters inside of a component I'm trying to build.

所以我用这个：

<router-link :to="permalink">Title of thing</router-link>

然后直接指向路由器视图以拉出论坛主题。在路由器中使用它：

To then direct the router view to pull the forum thread. Using this in the router:

import ForumThread from './views/barracks/forumThreadSingle';

// Other routes...
let routes = [
    {
        path: '/barracks/th/:id',
        component: ForumThread,
    } 
]; 

我在论坛线程组件中看到$ route.params.id也被传递了；但是，当我尝试像这样访问它时：

I can see in the forumthread component that $route.params.id is being passed too it; however, when I try to access it like this:

console.log('The id is: ' + $route.params.id);

无法找到对象的参数部分。

It's unable to find the params portion of the object.

VueJS和JavaScript本身对我来说都是很新的。我所见过的所有示例均显示模板与路由器文件内联，这是我试图防止这样做以帮助保持代码的可读性和整洁性。

VueJS is pretty new to me as well as JavaScript itself. All the examples I've seen show the templates being inline with the router file which is something I am trying to prevent to help keep my code readable and clean.

需要进行哪些调整可以使属性传递到模板文件吗？

What adjustments can I make so that I can pass properties to the template file?

谢谢！

推荐答案

如果使用的是Vue Loader设置（文件中具有< template>< / template> 标记），则需要使用 this 引用$ router，如果您在< script>< / script> 文件的一部分。

If you're using the Vue Loader setup (which has <template></template> tags in the files), you need to use this to reference the $router, if you're doing so within the <script></script> part of the file.

 console.log('The id is: ' + this.$route.params.id);

这篇关于在VueJS中访问$ route.params的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！