Vue.js两级路由
来源:互联网 发布:js身份证号计算年龄 编辑:程序博客网 时间:2024/06/05 18:32
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ text-decoration: none; } h3{ color: #ffb20a;display: inline-block; } #app a{color: red} </style> <script src="js/vue.js"></script> <script src="js/vue-router.js"></script></head><body><div id="app"> <router-link to="/home"> <h3>主页</h3> </router-link> <router-link to="/user"> <h3>用户</h3> </router-link> <hr> <router-view></router-view></div><template id="aaa"><div> <h1>这是主页页面</h1> <router-link to="/home/homePage"><span>点击我看我子页面</span></router-link> <router-view></router-view></div></template><template id="bbb"><div> <h1>这是用户页面</h1> <router-link to="/user/userPage"><span>点击我看我子页面</span></router-link> <router-view></router-view></div></template><template id="ccc"><div> <h4>这是主页页面的子页面</h4></div></template><template id="ddd"><div> <h4>这是用户页面的子页面</h4></div></template><script> first=({ template:"#aaa" }); second=({ template:"#bbb" }); third=({ template:"#ccc" }); fouth=({ template:"#ddd" }); router=new VueRouter({ routes:[ { path:"/home", component:first, children:[ {path:"/home/homePage",component:third} ] }, { path:"/user", component:second, children:[ {path:"/user/userPage",component:fouth} ] }, {path:"*",redirect:"/home"} ] }); new Vue({ router, el:"#app", data:{ } })</script></body></html>
阅读全文
0 0
- Vue.js两级路由
- Vue.js路由
- vue.js路由服务笔记
- 11、vue.js 之路由
- 2.0vue.js 路由嵌套
- Vue.js框架路由练习
- 【21】vue.js — 路由
- 两级路由设置
- 使用vue.js路由后失效
- 16、vue.js 之路由传值
- 18、vue.js 之路由钩子函数
- 2.0版vue.js 路由原理
- 15、vue.js 之路由与子路由
- Vue.js路由组件vue-router的使用方法
- Vue路由
- vue 路由
- Vue路由
- Vue路由
- JavaScript操作Cookie实现“历史搜索”
- php实现返回上一页的功能的3种有效方法
- 机器学习之AdaBoost元算法(七)
- Git安装及SSH Key管理之Mac篇
- ACM训练题
- Vue.js两级路由
- 19个MySQL性能优化要点解析
- (3)学习SpringBoot 之 Junit测试
- 关于Flexsns Sky 卡80%,以及乱码的解决问题
- 数据库的数据独立性体现在哪里?
- 光学字符识别(OCR,Optical Character Recognition)
- C 语言学习
- [知了堂学习笔记]_Jquery_Validate 表单校验的使用[知了堂学习笔记]_Jquery_Validate 表单校验的使用
- 将字符串循环左移n位