查看以下文档:

看起来你可以把<router-link :to="variableName">Link Text</routerlink>捆起来,这很漂亮;然而,我在try 访问我试图构建的组件内部的路由参数时遇到了一些问题.

所以我用这个:

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

然后 bootstrap 路由视图拉论坛线程.在路由中使用:

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

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

我可以在forumthread组件中看到$route.帕玛斯.身份证也在被传递;然而,当我try 这样访问它时:

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

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

VueJS和JavaScript本身对我来说都是全新的.我看到的所有示例都显示了模板与路由文件内联,这是我试图阻止的,以帮助保持代码可读性和干净性.

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

谢谢

推荐答案

如果使用Vue Loader设置(文件中有<template></template>个标记),则需要使用this来引用$router(如果在文件的<script></script>部分中这样做).

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

Vue.js相关问答推荐

虚拟DOM在Vue中姗姗来迟

vuejs:在确认提示之前更改 HTML

如何在Vue3中使用vuechartjs 5.2从父组件更新图表

Vue 3 在一个值更改问题后再次重新渲染每一行

Vuetify 3 - NavBar 组件占据整个视口高度

Vue3如何将自定义事件绑定到路由视图中的特定组件?

将初始值设置为可直接在 HTML 中使用的 vue.js 模型

如何在 A-La-Carte 系统中使用 vuetify 加载程序时导入 vuetify/lib

Vuetify grid layout - 如何填充网格中元素的高度

nuxt.js - 预加载 .woff 字体加载为@font-face

在重复内容区域中添加

如何修复跨域读取阻塞 (CORB) 阻止了 MIME 类型应用程序/json 的跨域响应问题?

如何在某些异步数据(在 Vuex 存储中)加载之前防止任何路由?

我可以使用 vue.js v-if 来判断值是否存在于数组中

Vuetify 单选按钮未显示为选中状态

Vue router路由,Root Vue 没有数据?

Vue.js 处理多次点击事件

带有 Firebase 云消息传递的 Vue pwa 无法正常工作

用于 nuxt.js 构建的自定义 index.html

Vue组件如何命名