- A+
所属分类：Web前端
案例大部分都是用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; }, })
