在 VueJS 中访问 $route.params

Posted 2023-02-22

【中文标题】在 VueJS 中访问 $route.params

【英文标题】：Accessing $route.params in VueJS

【发布时间】：2018-05-05 00:34:50

【问题描述】：

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

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

所以我用这个：

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

然后直接路由器视图拉论坛线程。在路由器中使用它：

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 本身一样都是新的。我看到的所有示例都显示模板与路由器文件内联，这是我试图阻止的，以帮助保持我的代码可读和干净。

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

谢谢！

【问题讨论】：

您能否围绕您的console.log 声明显示更多上下文。这是在 Vue 实例的函数中吗？

permalink 变量的内容是什么？

在 vue 组件中，您可以简单地使用 this.$route.params....

【参考方案1】：

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

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

【讨论】：

就我而言，我不得不使用 console.log('The id is: ' + this.$route.params.id.toString());

【参考方案2】：

如果想通过 vue-router 4.x 的组合 API 在 vue 3 中获取参数，可以使用 useRoute 来实现。

import useRoute from "vue-router";
setup()
   const route = useRoute();
   const id = route.params.id;