了了亭,妈咪宝贝育儿网,杨卫泽是顾秀莲女婿
vue中,有一个类库叫做vue-router,是用来做单页面路由的。做路由一般分为四个步骤:
github上vue-router下载地址:
关于路由跳转的简单代码如下:
<!doctype html> <html> <head> <meta charset="utf-8" /> <script type="text/javascript" src="js/vue.js" ></script> <script type="text/javascript" src="js/vue-router.js" ></script> <script type="text/javascript" src="js/vue-resource.js" ></script> <title></title> </head> <body> <div id="box"> <ul> <li> <a v-link="{path:'/home'}">我是第一个a</a> </li> <li > <a v-link="{path:'news'}">我是第二个a</a> </li> </ul> <div> <router-view></router-view> </div> </div> </body> <script> //1.准备一个根组件 var app=vue.extend(); //2.home news 组件准备 var home=vue.extend({ template:'<h3>我是第一个a的内容页</h3>' }); var news=vue.extend({ template:'<h3>我是第二个a的内容页</h3>' }) //3.准备路由 var router = new vuerouter(); //4.关联 router.map({ 'home':{ component:home }, 'news':{ component:news } }) //5.启动路由 router.start(app,'#box'); </script> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持移动技术网。
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
详解element上传组件before-remove钩子问题解决
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
网友评论