0

过去三个小时左右，我一直在尝试将VueJS 2 + vue-router + CDN 项目转换为VueJS 3。到目前为止，我还无法使其工作。VueJS 2 版本运行良好。VueJS 3 版本是行不通的。我知道迟早一个项目需要用 CLI 来实现，但我现在更愿意使用 CDN，因为我还在试验。

我收到的错误消息是：Uncaught ReferenceError: createRouter is not defined。在我的试炼和磨难中，我接受了许多其他人。

这是 JS 部分（VueJS 2，工作正常）：

const Home = { template: `<h1>Contenuto Home</h1>` };
const About = { template: `<h1>Contenuto About</h1>` };
const Portfolio = { template: `<h1>Contenuto Portfolio</h1>` };
const Contatti = { template: `<h1>Contenuto Contatti</h1>` };

const routes = [
    { path: "/", component: Home },
    { path: "/about", component: About },
    { path: "/portfolio", component: Portfolio },
    { path: "/contatti", component: Contatti }
];

const router = new VueRouter({
    routes // short for `routes: routes`
});

const vm = new Vue ({
    router,
    el: "#app",
    data: {
        mess: "Ciao Mondo"
    }
}).$mount("#app");

HTML 看起来像这样（VueJS 2，工作正常）：

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue Router</title>
</head>
<body>
    <div id="app">
        <h1>{{ mess }}</h1>

        <!-- i links -->
        <router-link to="/">Home</router-link>
        <router-link to="/about">About</router-link>
        <router-link to="/portfolio">Portfolio</router-link>
        <router-link to="/contatti">Contatti</router-link>

        <!-- contenitore per il HTML -->
        <router-view></router-view>
    </div>




    <!-- VueJS -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <!-- vue-router -->
    <script src="https://unpkg.com/vue-router@3.0.2/dist/vue-router.js"></script>

    <!-- custom JS -->
    <script src="main.js"></script>
</body>
</html>

这是我将此代码转换为 VueJS 3 的尝试（不起作用 - Uncaught ReferenceError: createRouter is not defined）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="https://unpkg.com/vue@next"></script>
    <script src="https://unpkg.com/vue-router@4"></script>


    <div id="app">
        <h1>{{ mess }}</h1>

        <!-- i links -->
        <router-link to="/">Home</router-link>
        <router-link to="/about">About</router-link>
        <router-link to="/portfolio">Portfolio</router-link>
        <router-link to="/contatti">Contatti</router-link>

        <!-- contenitore per il HTML -->
        <router-view></router-view>
    </div>
    
    <script>

        let app = Vue.createApp({
            data() {
                return {
                    mess: "ciao mondo"
                }
            }
        });

        const Home = { template: `<h1>Contenuto Home</h1>` };
        const About = { template: `<h1>Contenuto About</h1>` };
        const Portfolio = { template: `<h1>Contenuto Portfolio</h1>` };
        const Contatti = { template: `<h1>Contenuto Contatti</h1>` };

        const routes = [
            { path: "/", component: Home },
            { path: "/about", component: About },
            { path: "/portfolio", component: Portfolio },
            { path: "/contatti", component: Contatti }
        ];

        const router = new createRouter({
            history: createWebHistory(process.env.BASE_URL),
            routes // short for `routes: routes`
        });
    
        app.mount("#app");
        
    </script>

</body>
</html>
4

1 回答 1

0 
    const app = Vue.createApp({
        data() {
            return {
                mess: "ciao mondo"
            }
        }
    });

    const Home = { template: `<h1>Contenuto Home</h1>` };
    const About = { template: `<h1>Contenuto About</h1>` };
    const Portfolio = { template: `<h1>Contenuto Portfolio</h1>` };
    const Contatti = { template: `<h1>Contenuto Contatti</h1>` };

    const routes = [
        { path: "/", component: Home },
        { path: "/about", component: About },
        { path: "/portfolio", component: Portfolio },
        { path: "/contatti", component: Contatti }
    ];

    const router = VueRouter.createRouter({
           history: VueRouter.createWebHashHistory(),
           routes
    })

    app.use(router)
    app.mount('#app')
于 2021-09-15T15:31:54.737 回答