vue.js 里的路由概念
vue.js里的路由相当于就是局部刷新。点击左边的菜单,右边的内容在不刷新整个页面的情况下,进行局部刷新
vue-router.min.js
为了实现路由,需要一个额外的库: vue-router.min.js
路由代码讲解
<script src="http://how2j.cn/study/vue.min.js"></script> <script src="http://how2j.cn/study/vue-router.min.js"></script> <head> <style> a{ text-decoration: none; } a.router-link-active{ /* color:blue; */ background-color: lightGray; } div.menu{ border:1px solid gray; float:left; } div.menu a{ display:block; } div.workingRoom{ margin-left:100px; } div#app{ width:500px; padding:10px; margin:10px auto; } </style> </head> <div id="app"> <div class="menu"> <!-- router-link 相当于就是超链 to 相当于就是 href --> <router-link to="/user">用户管理</router-link> <router-link to="/product">产品管理</router-link> <router-link to="/order">订单管理</router-link> </div> <div class="workingRoom"> <!-- 点击上面的/user,那么/user 对应的内容就会显示在router-view 这里 --> <router-view></router-view> </div> </div> <script> /* * 申明三个模板( html 片段 ) */ var user = { template: '<p>用户管理页面的内容</p>' }; var second = { template: '<p>产品管理页面的内容</p>' }; var order = { template: '<p>订单管理页面的内容</p>' }; /* * 定义路由 */ var routes = [ { path: '/', redirect: '/user'}, // 这个表示会默认渲染 /user,没有这个就是空白 { path: '/user', component: user }, { path: '/product', component: second }, { path: '/order', component: order } ]; /* * 创建VueRouter实例 */ var router = new VueRouter({ routes:routes }); /* * 给vue对象绑定路由 */ new Vue({ el:"#app", router }) </script>
更多web前端自学相关知识,请查阅 HTML中文网 !!
以上就是vue.js什么是路由以及如何进行路由?的详细内容,更多请关注易知道|edz.cc其它相关文章!