vue3 cdn 写router

改写vue2
[javascript] cdn模式下vue和vue-router实现路由-腾讯云开发者社区-腾讯云 (tencent.com)

vue-router v4.0.15
https://unpkg.com/vue-router@4.0.15/dist/vue-router.global.js

vue v3.2.36
unpkg.com/vue@3.2.36/dist/vue.global.js

jquery

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./vue3.js"></script>
    <script src="./vue3-router4.js"></script>
    <script src="./jquery.min.js"></script>
</head>

<body>
    <div id="app" class="chatKfPageApp">
        <div>主页</div>
        <router-view></router-view>
    </div>
    <template id="chatKfIndex">
        <div>111</div>
        <router-link :to="`/chatKfBox/visitorId=${1}`">点击切换1</router-link>
        <div @click="onQiehuan">点击切换2</div>
    </template>
    <template id="chatBox">
        <div>222</div>
    </template>
</body>


<script>
    //组件 - 首页
    var chatKfIndex = {
        data: function () {
            return {
                visitors: {},
            }
        },
        methods: {
            onQiehuan() {
                Vue.prototype.push({ path: `/chatKfBox/visitorId=${1}` })
            }
        },
        created: function () {
        },
        // `<h1>Contenuto Home</h1>`
        template: $("#chatKfIndex").html()
    };
    //组件 - 详情
    var chatKfBox = {
        data: function () {
            return {
                msgList: [],
                messageContent: "",
                face: [],
            }
        },
        methods: {
            init() {
                alert(this.$parent.socket);
                alert(this.$route.params.visitorId);
            },
        },
        created: function () {
            this.init();
        },
        template: $("#chatBox").html()
    };

    const AppVue = {
        data: function () {
            return {
                socket: null,
            }
        },
        created() {
            this.socket = 3;
        },
    }

    // 初始化
    const vueapp = Vue.createApp(AppVue)

    // 路由
    var routes = [
        { path: '/', component: chatKfIndex }, // 这个表示会默认渲染
        { path: '/chatKfBox/:visitorId', component: chatKfBox },
    ];

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

    vueapp.use(vuerouter);

    Vue.prototype = vuerouter

    vueapp.mount('#app')
</script>


</html>

关键点

<div id='app'></div>

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