欢迎光临
我的个人博客网站

[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;     }, })

 

  

 

赞(0) 打赏
未经允许不得转载:张拓的天空 » [javascript] cdn模式下vue和vue-router实现路由
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏