Блог

Главная - Вопросы по программированию - Маршрутизация VueJS 3 с vue-маршрутизатором и CDN

Маршрутизация VueJS 3 с vue-маршрутизатором и CDN

#vuejs2 #vue-router #vuejs3 #cdn #vue-router4

Вопрос:

В течение последних трех часов или около того я пытался преобразовать проект VueJS 2 vue-маршрутизатор CDN в проект VueJS 3. До сих пор мне не удавалось заставить его работать. Версия VueJS 2 работает просто отлично. Версия VueJS 3 просто не будет работать. Я понимаю, что рано или поздно проект потребуется реализовать с помощью CLI, но на данный момент я бы предпочел использовать CDN, так как я все еще экспериментирую.

Сообщение об ошибке, которое я получаю, звучит так: Ошибка без ссылки: createRouter не определен. Я принимал многих других в своих испытаниях и невзгодах.

Вот часть 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>

Ответ №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')

Комментарии:

1. Спасибо тебе, Виталий. Я отмечу ваш ответ как принятый, но не могли бы вы сначала удалить содержимое строки 24 (символы «})» в четвертой строке снизу), так как это вызывает ошибку и отлично работает без нее (это закрывает то, что не открыто)?

2. Да, это была ошибка. Обновленный

Метки: