<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue2.513.js "></script> <script src="vue-router2.0.js"></script> </head> <body> <div id="app"> <router-link to="/login">登录</router-link> <router-link to="/register">注册</router-link> <router-view></router-view> </div> </body> <script> //1.0准备三个组件 var App=Vue.extend({}); var login=Vue.extend({ template:'<div><h1>登录</h1></div>' }); var register=Vue.extend({ template:'<div><h1>注册</h1></div>' }); //2.0实例化路由规则对象 var router=new VueRouter( { routes:[//数组里面给它两个对象 {path:'/',redirect:'/login'},//这个是设置默认路由 {path:'/login',component:login}, {path:'/register',component:register}//这样路由对象就定义好了 ] }); //开启路由对象 new Vue({ el:'#app', router:router//开启路由对象 }); </script> </html>
vue2.0实现简单的路由并设置默认路由
猜你喜欢
转载自blog.csdn.net/weixin_40593587/article/details/79309354
今日推荐
周排行