vue js中vue路由器的动态路由与strapi headless CMS - 路由器链接和href标签抛出错误答案

【问题标题】：dynamic routing with vue router in vue js with strapi headless CMS - router link and a href tags throwing errorsvue js中vue路由器的动态路由与strapi headless CMS - 路由器链接和href标签抛出错误
【发布时间】：2021-06-01 10:16:13
【问题描述】：

我正在使用 vue js 构建一个 Strapi 网站。

在 Strapi 中，我有一个名为“网络研讨会”的自定义集合类型 - 要命中的端点如下所示：

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

上面返回一个 JSON 对象。

要点击单个网络研讨会，每个网络研讨会都有一个唯一标识符，从 1 开始。点击单个网络研讨会 JSON 数据，如下所示：

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

这将返回一个特定的网络研讨会。

我需要 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>

我需要做的是创建一个视图，当您点击网络研讨会特定 ID（“http://localhost:1337/webinars/1”、“http://localhost:1337/webinars/2”等)

我的理解是我需要使用dynamic routes。所以我修改了我的路由器并添加了拉入视图的导入语句，以及添加声明：

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 属性指定。默认情况下，它呈现为具有正确 href 的标签，但可以配置了标签道具。另外，链接自动获取目标路由处于活动状态时的活动 CSS 类。

优于硬编码原因如下：

它在 HTML5 历史模式和哈希模式下的工作方式相同，所以如果您曾经决定切换模式，或者当路由器回退到散列时 IE9 中的模式，无需更改任何内容。在 HTML5 历史模式下， router-link 会拦截点击事件，这样浏览器就不会尝试重新加载页面。当您在 HTML5 中使用 base 选项时历史模式，你不需要将它包含在 prop 的 URL 中。

所以我继续尝试将它们添加到网络研讨会组件中：

<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>

这会返回：

模块错误（来自 ./node_modules/vue-loader/lib/loaders/templateLoader.js）：（发出值而不是错误的实例）

编译模板时出错：

to="/webinars/{{ webinar.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/components/Webinars.vue?vue&type=template&id=44d01bf9&

语法错误：意外的令牌 (1:301)

什么是意外令牌？

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

【问题讨论】：

标签： javascript vue.js vuejs2

【解决方案1】：

作为第一个错误状态，interpolation 内部属性不再受支持。插值是您使用的{{ }} 模板语法。文档解释how to bind values in attributes

当您v-bind 一个属性时，您为其分配的值不再被视为普通字符串。所以，当你写的时候：

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

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

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

ES6 Template literals

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

字符串连接

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

【讨论】：