<script type="text/javascript" src="lib/vue-router.min.js"></script> <div id="box"> <!-- 时间:2018-03-20 描述: 跳转链接 使用a-link进行链接的跳转 展示内容 <router-view></router-view> --> <ul> <li><a v-link="{path:'/home'}">主页</a></li> <li><a v-link="{path:'/news'}">新闻</a></li> </ul> <!-- 时间:2018-03-21 描述:router-view的div必须放在box的里面,否则不起作用 --> <div> <router-view></router-view> </div> </div> <script> //准备一个根组件 var App=Vue.extend(); //Home News组件准备 var Home=Vue.extend({ template:'我是主页' }); var News=Vue.extend({ template:'我是新闻' }); //准备路由 var router=new VueRouter(); //关联 router.map({ 'home':{ component:Home }, 'news':{ component:News } }); //跳转 //打开后默认显示的页面 //跳转多个页面可以在后面加",",然后写多个 router.redirect({ '/':'/home' }); //启动路由 router.start(App,'#box'); </script> |
<script type="text/javascript" src="lib/vue-router.min.js"></script> <style> .v-link-active{ color:#1B6D85;} </style> </head> <body> <div id="box"> <!-- 时间:2018-03-20 描述: 跳转链接 使用a-link进行链接的跳转 展示内容 <router-view></router-view> --> <ul> <li><a v-link="{path:'/home'}">主页</a></li> <li><a v-link="{path:'/news'}">新闻</a></li> </ul> <!-- 时间:2018-03-21 描述:router-view的div必须放在box的里面,否则不起作用 --> <div> <router-view></router-view> </div> </div> <template id="home"> <h3>首页</h3> <div> <a v-link="{path:'/home/login'}">登陆</a> <a v-link="{path:'/home/reg'}">注册</a> </div> <div> <router-view></router-view> </div> </template> <template id="news"> <h3>新闻</h3> <div> <a v-link="{path:'/news/detail/001'}">新闻001</a> <a v-link="{path:'/news/detail/002'}">新闻002</a> </div> <router-view></router-view> </template> <template id="detail"> <!-- 时间:2018-03-27 描述: $route.params 当前参数 $route.path 当前路径 $route.query 数据 --> {{$route.params | json}}<br> {{$route.path}}<br> {{$route.query | json}} </template> <script> //准备一个根组件 var App=Vue.extend(); //Home News组件准备 var Home=Vue.extend({ template:'#home' }); var News=Vue.extend({ template:'#news' }); var Detail = Vue.extend({ template:'#detail' }) //准备路由 var router=new VueRouter(); //关联 router.map({ 'home':{ component:Home, subRoutes:{ 'login':{ component:{ template:'登陆信息' } }, 'reg':{ component:{ template:'注册信息' } } } }, 'news':{ component:News, subRoutes:{ '/detail/:id':{ component:Detail } } } }); //跳转 //打开后默认显示的页面 //跳转多个页面可以在后面加",",然后写多个 router.redirect({ '/':'/home' }); //启动路由 router.start(App,'#box'); </script> |
创始人微信
路漫漫其修远兮 吾将上下而求索添加创始人微信,一起交流心得
时间:2017年01月13日
时间:2017年06月12日
时间:2019年04月10日
时间:2017年04月09日
时间:2017年01月09日
评论