在 VueJS 中访问 $route.params

Question

查看此文档： 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,
    } 
];

我可以在论坛线程组件中看到 $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);

Answer 2

对于并且想要在 vue 3 中获取参数 API for vue-router 4.x，可以使用 useRoute 来实现。

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

在 VueJS 中访问 $route.params

Accessing $route.params in VueJS

javascript

router

routes

vue.js