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

Posted 2023-02-22

【中文标题】CSS 在动态路由上不能与 vue js 一起使用

【英文标题】：CSS is not working with vue js on dynamic routing

【发布时间】：2019-08-11 14:29:18

【问题描述】：

我在 vue 中创建了路由

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

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

Uncaught SyntaxError: Unexpected token

我的组件的 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: '/' )
    
  
 

任何想法可能是问题所在？

【问题讨论】：

“有什么想法可能是问题所在吗？”。在你的 CSS 中。

在组件的源代码和 css 中搜索 < 字符，看看是否有语法错误。它似乎不在您发布的代码中。

可能是一个不受支持的 CSS 功能，您使用的是 filter() 吗？

【参考方案1】：

请查看link。

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

在样式标签中，您可以直接放置 css 或使用 @import 导入 css 文件，如 @Geraldine Golong 的回答中的 here 所示。

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

希望对你有帮助。