命名视图
视图 命名
2023-09-14 08:57:25 时间
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <div> <router-link to="/">首页</router-link> <router-link to="/user">用户管理</router-link> <router-link to="/post">帖子管理</router-link> </div> <div> <router-view></router-view> <router-view name="sidebar"></router-view> <router-view name="content"></router-view> </div> </div> <script src="../../lib/vue.js"></script> <script src="../../lib/vue-router.js"></script> <script src="js/main.js"></script> </body> </html>
var routes = [ { path: "/", component: { template: ` <h1>首页管理</h1> ` } }, { path:"/user", components:{ sidebar:{ template:` <div> <ul> <li>用户列表</li> <li>权限管理</li> </ul> </div> ` }, content:{ template:` <div> 主要的文本去,分区 </div> ` } } }, { path:"/post", components:{ sidebar:{ template:` <div> <ul> <li>帖子列表</li> <li>帖子管理</li> </ul> </div> ` }, content:{ template:` <div> 主要的文本去,分区 </div> ` } } } ]; var router = new VueRouter({ routes: routes }); new Vue({ el: "#app", router: router, })
相关文章
- tableView的组顶部视图和底部视图跟随tableView滑动
- IOS开发之----UIScrollView滚动条视图的使用
- 如何创建可扩展表视图中的iOS 学习和拓展优化(有待更新)
- Java实现 LeetCode 199 二叉树的右视图
- Java实现 LeetCode 199 二叉树的右视图
- 读书笔记--SQL必知必会18--视图
- Flutter 陈航 09-视图渲染 三棵树 Widget
- c# mvc 移除多于的视图引擎
- SAP UI5 XML 视图中数据绑定路径语法的难点和易混淆点的专题讲解
- 将SAP Cloud for Customer Customer视图的Account ID配置出来
- Atitit 视图参数解决方案 oracle版和mysql版本 attilax总结.docx
- SAP UI5 视图控制器 View Controller 的生命周期方法 - Lifecycle methods
- 114:vue+openlayers 实现视图联动功能(代码示例 )
- SQL Server创建视图