使用 vue-router 和 CDN 的 VueJS 3 路由

Question

在过去的三个多小时里，我一直在尝试将 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（不起作用 - 未捕获的引用错误：未定义 createRouter）：

<!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>

Answer 1

    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')

使用 vue-router 和 CDN 的 VueJS 3 路由

VueJS 3 routing with vue-router and CDN

cdn

vue-router

vuejs2

vuejs3

vue-router4