动态路由与vue路由器在vue js与strapi headless CMS - router链接和一个href标签抛出

Question

我正在用vue js构建一个strapi站点。

在strapi中，我有一个自定义集合类型称为"webinars"-要命中的端点看起来像这样:

const response = await axios.get('http://localhost:1337/webinars')

上面返回一个JSON对象。

要点击单独的网络研讨会，每个研讨会都有一个唯一的标识符，从1开始。点击单独的webinar JSON数据，看起来像这样:

const response = await axios.get('http://localhost:1337/webinars/1')

返回一个特定的webinar。

我需要2个视图，一个是所有的网络研讨会，和具体的。

首先，请看下面我的路由器:

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Webinars from '../views/Webinars.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
},
{
path: '/webinars',
name: 'Webinars',
component: Webinars
},
{
path: '/webinars/:id',
name: 'Webinars',
component: WebinarSingle
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router

现在，返回所有网络研讨会的视图是这样的:

<template>
<div>
<h1>{{ header }}</h1>
<div v-if="error" class="webinar-error">
<h1>{{ error }}</h1>
</div>
<div v-else>
<div class="webinar-card" v-for="webinar in webinars" :key="webinar.id">
<h3>{{ webinar.webinar_title }}</h3>
<p>{{ webinar.webinar_description }}</p>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios';
export default {
name: 'Webinars',
data () {
return {
webinars: [],
error: null
}
},
async mounted () {
try {
const response = await axios.get('http://localhost:1337/webinars')
this.webinars = response.data
} catch (error) {
this.error = error;
}
},
props: {
header: String
}
}
</script>

我需要做的是创建一个视图，当你点击一个webinar特定的ID ('http://localhost:1337/webinars/1'， 'http://localhost:1337/webinars/2'等)呈现

我的理解是我需要使用动态路由。所以我修改了我的路由器，添加了import语句来导入视图，并添加了如下声明:

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Webinars from '../views/Webinars.vue'
import WebinarSingle from '../views/WebinarSingle.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
},
{
path: '/webinars',
name: 'Webinars',
component: Webinars
},
{
path: '/webinars/:id',
name: 'Webinars',
component: WebinarSingle
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router

我认为这里的下一步是现在添加<router-link>标签，以基于ID命中网络研讨会。https://router.vuejs.org/api/

是启用用户导航的组件目标位置是用to prop指定的。默认情况下，它呈现为带有正确href的标记，但也可以配置了标签prop。另外，链接自动获得当目标路由是活动的时候，一个活动的CSS类。

优于硬编码以下原因:

它在HTML5历史模式和哈希模式下的工作方式相同，所以如果你决定切换模式，或者当路由器回到哈希时模式，不需要更改任何内容。在HTML5历史记录模式下，Router-link会拦截点击事件，这样浏览器就不会这样做了尝试重新加载页面。当你在HTML5中使用基础选项时历史模式，你不需要把它包含在prop的url中。

所以我继续尝试将它们添加到webinar组件中:

<template>
<div>
<h1>{{ header }}</h1>
<div v-if="error" class="webinar-error">
<h1>{{ error }}</h1>
</div>
<div v-else>
<div class="webinar-card" v-for="webinar in webinars" :key="webinar.id">
<router-link to="/webinars/{{ webinar.id }}">
<h3>{{ webinar.webinar_title }}</h3>
<p>{{ webinar.webinar_description }}</p>
</router-link>
</div>
</div>
</div>
</template>

这回报:

模块错误(from。/node_modules/vue-loader/lib/加载器/templateLoader.js):(发出值而不是错误的实例)

编译模板错误:

="/在线研讨会/{{网络研讨会。id}}":插值内部属性有被移除。使用v-bind或冒号代替。例如,而不是，使用。

所以改成:

<template>
<div>
<h1>{{ header }}</h1>
<div v-if="error" class="webinar-error">
<h1>{{ error }}</h1>
</div>
<div v-else>
<div class="webinar-card" v-for="webinar in webinars" :key="webinar.id">
<router-link :to="/webinars/{{ webinar.id }}">
<h3>{{ webinar.webinar_title }}</h3>
<p>{{ webinar.webinar_description }}</p>
</router-link>
</div>
</div>
</div>
</template>

得到:

错误./src/组件/Webinars.vue ? vue&类型= template& id = 44 d01bf9&

语法错误:Unexpected token (1:30 01)

意外标记是什么?

如何在vue js中映射动态路由到不同的端点?

Answer 1

如第一个错误所述，不再支持属性内插。插值是您使用的{{ }}模板语法。文档解释了如何绑定属性

中的值当您v-bind属性时，您分配给它的值不再被视为普通字符串。所以，当你写:

<router-link :to="/webinars/{{ webinar.id }}">

分配给:to的值被视为javascript。/webinars/{{webinar.id}}是无效的javascript表达式。

有几种方法可以实现你想要的:

ES6模板字面值

<router-link :to="`/webinars/${webinar.id}`">

字符串连接

<router-link :to="'/webinars/' + webinar.id">