<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <script type="text/javascript" src="../vue221.js"></script> <script ype="text/javascript" src="../vue-router231.js"></script> <body> <div id="app"> <router-link to="/login">login</router-link> <router-link to="/regist/fvfdvdf">regist</router-link> <router-view></router-view> </div> </body> <script> //开始路由编码的编写 var App = Vue.extend({}); var login = Vue.extend({ template: "<h1>登陆界面</h1>" }); var regist = Vue.extend({ template: "<h1>注册界面{{name}}</h1>", data:function () { return{ name:'' } }, created:function () { this.name=this.$route.params.name } }); //2.0实例化路由规则对象 var route = new VueRouter({ routes:[ {path:'/',redirect:'/login'}, { path:'/login',component:login }, { path:'/regist/:name',component:regist }, ] }); //3.0开启路由对象 new Vue({ el:'#app', router:route }) </script> </html>
Vue2.0路由的写法及传参
猜你喜欢
转载自blog.csdn.net/baidu_39001881/article/details/81474989
今日推荐
周排行