<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>路由</title> </head> <script src="vue1.0.11.js"></script> <script src="vue-router1.0.js"></script> <body> <div id="app"> <a href="#" v-link="{path:'/login'}">登录</a> <a href="#" v-link="{path:'/register/200'}">注册</a> <!--//还要有一个路由占位--> <router-view></router-view> </div> </body> <script> //开始路由代码的编写 //定义三个组件 var App=Vue.extend({}); var login=Vue.extend({ template:'<h1>登录页面</h1>' }); var register=Vue.extend({ template:'<h1>注册页面{{id}}</h1>', data:function () { return { id:0 } }, //用生命周期来调用它，这里id1这个值是根据下面设定路由规则的设定来写的，如果下来是id2,那么这里也要跟着它一样 created:function () { this.id=this.$route.params.id1; } }); // 设定路由规则 var router=new VueRouter(); router.map({ 'login':{component:login}, 'register/:id1':{component:register} }); //开启路由 router.start(App,'#app'); //默认跳转到/login router.redirect({'/':'/login'});//表示如果是在/下面，那么就跳转登录页面 </script> </html>
vue1.0简单的使用路由并传参数
猜你喜欢
转载自blog.csdn.net/weixin_40593587/article/details/79302083
今日推荐
周排行