访问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/barracks/forumThreadSingle';

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

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

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

它无法找到对象的参数部分.

VueJS对我和JavaScript本身都是新手.我看到的所有示例都显示模板与路由器文件内联,这是我试图阻止以帮助保持我的代码可读和清洁.

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

谢谢!

Answer 1

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

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

Answer 2

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

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