<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <script type="text/javascript" src="../vue1026.js"></script> <script ype="text/javascript" src="../vue-router1.0.min.js"></script> <body> <div id="app"> <a href="#" v-link="{path:'/account/login'}">login</a> <a href="#" v-link="{path:'/account/regist'}">regist</a> <router-view></router-view> </div> </body> <script> //开始路由编码的编写(注册组件) var App = Vue.extend({}); var account = Vue.extend({ template: "<router-view></router-view>" }); var login = Vue.extend({ template: "<h1>登陆界面</h1>" }); var regist = Vue.extend({ template: "<h1>注册界面</h1>", }); var router = new VueRouter; //设定路由规则 //第一个login是path后面的参数,第二个login是组件的名字 router.map({ 'account':{ component:account, subRoutes:{ 'login': { component: login }, 'regist': { component: regist } } }, }); //开启路由 router.start( App, '#app' ) //设定默认路由跳转到login route.redirect({ '/':'/account/login' }) </script> </html>
Vue1.0嵌套路由
猜你喜欢
转载自blog.csdn.net/baidu_39001881/article/details/81474565
今日推荐
周排行