您现在的位置是:首页 > Javascript
当前栏目
[javascript] cdn模式下vue和vue-router实现路由
2023-02-18 15:36:30 时间
案例大部分都是用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; }, })
相关文章
- p5.js 使用npm安装p5.js后如何使用?
- Fabric.js 限制边框宽度缩放
- JavaScript Array 对象高阶方法 some、filter、indexOf
- 软件测试|selenium执行js脚本
- JavaScript 实现阻碍调试
- JQuery 实现开发常用功能
- 使用 JS 检测网址能否正常加载
- 在 Windows 上快速安装 Hexo · 安装 Node.js
- xterm.js 组件实现WebSSH功能
- 让阅读无缝衔接 —— JS 获取用户阅读进度
- JavaScript 前端笔记总结(精简)
- Web优化躬行记(2)——JavaScript
- Node.js躬行记(4)——自建前端监控系统
- Node.js躬行记(3)——命令行工具
- Node.js躬行记(2)——文件系统和网络
- Node.js躬行记(1)——Buffer、流和EventEmitter
- 21种JavaScript设计模式最新记录(含图和示例)
- Vue躬行记(7)——渲染函数和JSX
- javascript原型 原型链
- JsonIgnoreProperties JsonIgnore导致RequestBody无法接受参数值