javascript - 在 VueJS 中访问 $route.params

Question

查看此文档: https://router.vuejs.org/en/essentials/navigation.html

看起来您可以绑定(bind) <router-link :to="variableName">Link Text</routerlink>这很漂亮；但是，我在尝试访问我尝试构建的组件内部的路由参数时遇到了一些问题。

所以我用这个:

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

然后引导路由器 View 拉论坛线程。在路由器中使用它:

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

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

我可以在 forumthread 组件中看到 $route.params.id 也被传递了；但是，当我尝试像这样访问它时:

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

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

VueJS 和 JavaScript 本身对我来说都是全新的。我看到的所有示例都显示模板与路由器文件内联，这是我试图阻止的事情，以帮助保持我的代码可读性和整洁。

我可以做哪些调整以便将属性传递给模板文件？

谢谢!

Answer 1

如果您使用的是 Vue Loader 设置(文件中有 <template></template> 标签)，您需要使用 this引用 $router，如果你在 <script></script> 中这样做文件的一部分。

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