CSS 在动态路由上不能与 vue js 一起使用

Question

我在 vue 中创建了路由

{
  path: '/coursedetailed/:id',
  component: MyCourseDetailed,
  props: true
},

它可以工作，但是在我转到页面后，似乎 css 已被禁用。 如果填充了数据，所有请求都是完整的组件。 控制台出现一个错误。 其他页面运行良好

未捕获的 SyntaxError：意外的令牌 <

我的组件的 vue 脚本：

<script>
import axios from 'axios'
import MenuWhite from '@/components/MenuWhite.vue'

export default {
  name: 'coursedetailed',
  props: ['id'],
  components: {
    MenuWhite
  },
  data: () => {
    return {
      course: [],
      errors: []
    }
  },
  created () {
    this.getData()
  },
  methods: {
    getData () {
      axios({
        method: 'get',
        url: this.$store.state.endpoints.baseUrl + '/api/courses/' + this.$route.params.id + '/',
        withCredentials: true,
        headers: {
           Authorization: `JWT ${this.$store.state.jwt}`,
          'Content-Type': 'application/json'
        }
      }).then((response) => {
        this.course = response.data
      })
    },
  isToken () {
    if (this.$store.state.jwt) {
      this.$router.push({ path: '/profile' })
    } else {
      this.$router.push({ path: '/' })
    }
  }
 }
}

问题可能出在哪里？

Answer 1

请检查此链接。

正如它所说，一个基本的 Vue 组件可能有一个template 、一个script和一个style标签。

在样式标签内，您可以直接放置您的 css 或使用@import导入您的 css 文件，正如您在@Geraldine Golong 的回答中看到的那样。

所以，我的建议是将你的 css 代码放在你的组件中（如果是这样，建议你放在你的父组件中），或者使用适当的 Vue 标签导入你的 css 文件。

希望能帮助到你。