<!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:'/account/login'}">登录</a> <a href="#" v-link="{path:'/account/register'}">注册</a> <!--占位符，用来显示--> <router-view></router-view> </div> </body> <script> //1.0实例化Router对象,也就是设定路由规则 var Router=VueRouter(); //2.0定义相关组件 var App=Vue.extend({}); var account=Vue.extend({ template:'<router-view></router-view>' }); var login=Vue.extend({ template:'<h1>登录页面</h1>' }); var register=Vue.extend({ template:'<h1>注册页面</h1>' }); //3.0完成嵌套路由的写法 router.map({ 'account':{ component:account, subRoutes:{ 'login':{ component:login }, 'register':{ component:register } } } }); //4.0启动路由 router.start(App,'#app'); //启动默认显示 router.redirect({'/':'/account/login'}); </script> </html>
vue1.0嵌套路由这样写哪里错了，为什么没有显示出来
猜你喜欢
转载自blog.csdn.net/weixin_40593587/article/details/79309071
今日推荐
周排行