首页 > 解决方案 > Vue.js x-template 运行良好,但在 IDE 中无法解析

问题描述

我用 vue-router 做了一个简单的 html 文件。

我使用 x-template 来定义组件模板。

它在 chrome 浏览器上运行良好,但我发现 IntelliJ IDE 显示一条红线。

在此处输入图像描述

我无法理解为什么 IDE 无法解决这个问题,以及为什么我的代码在浏览器上运行良好,即使符号无法解析。

有人有想法吗?(代码写在下面)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Router_App</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
    <nav>
        <router-link to="/top">Top page</router-link>
        <router-link to="/users">User page</router-link>
    </nav>
    <router-view></router-view>
</div>

<script type="text/x-template" id="user-list">
    <div>User page</div>
</script>

<script>
    let router = new VueRouter({
        routes: [
            {
                path: '/top',
                component: {
                    template: '<div>Top page</div>'
                }
            },
            {
                path: '/users',
                component: {
                    template: '#user-list'
                }
            }
        ]
    })

    let app = new Vue({
        el: '#app',
        router: router
    }).$mount()

</script>

</body>

</html>

标签: vue.js

解决方案


推荐阅读