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

Posted 2023-02-16

【中文标题】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 errors

【发布时间】：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 中的动态路由映射到不同的端点？

【参考方案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">