zoukankan      html  css  js  c++  java
  • [javascript] cdn模式下vue和vue-router实现路由

    案例大部分都是用npm模式的,现在这个是使用cdn模式的更符合后端开发

    html部分 , 注意template标签 ,定义上的id

        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script>
    
        <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"</script>
    
    
    </head>
    <body>
    <div id="app" class="chatKfPageApp">
        <router-view></router-view>
    </div>
    <template id="chatKfIndex">
    <div>111</div>
    </template>
    <template id="chatBox">
        <div>222</div>
    </template>
    </body>
    
    <script src="/static/js/chat-kf-page.js?v=0.1.1"></script>
    </html>
    

    js部分 , 注意每个template对应一个组件 , 子template可以继承父级的data变量 , 跳转的时候可以带着参数 , 获取到参数

    //首页组件
    var chatKfIndex = {
        data: function(){
            return {
                visitors: {},
            }
        },
        methods: {
        },
        created: function () {
        },
        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()
    };
    var routes = [
        { path: '/',component:chatKfIndex}, // 这个表示会默认渲染
        {path:'/chatKfBox/:visitorId',component:chatKfBox},
    ];
    var router = new VueRouter({
        routes: routes
    })
    
    new Vue({
        router,
        el: '#app',
        data: function(){
            return{
                socket:null,
            }
        },
        created: function () {
            this.socket=3;
        },
    })

      

  • 相关阅读:
    带你看懂MySQL执行计划
    MySQL rename table方法大全
    MySQL慢日志全解析
    mybatis-通用mapper
    springboot-数据访问
    docker-1常用命令
    springboot-错误处理
    springboot-配置1
    react--temp
    了解react记录2-生命周期
  • 原文地址:https://www.cnblogs.com/taoshihan/p/13685947.html
Copyright © 2011-2022 走看看