index.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <div> <router-link to="/">首页</router-link> <router-link to="/login">登录</router-link> <router-link to="/post">帖子管理</router-link> </div> <div> <router-view></router-view> </div> </div> <script src="../lib/vue.js"></script> <script src="../lib/router.js"></script> <script src="./js/app.js"></script> </body> </html>
app.js:
var routes = [ { path: '/', component:{ template: ` <p>这里是首页</p> ` } },{ path: '/login', component: { template: ` <p>这里是登录!</p> ` } },{ path: '/post', component: { template: ` <p>这里是帖子管理</p> ` } } ]; var router = new VueRouter({ routes: routes, }); router.beforeEach(function(to, from, next){ var login_in = true; if(!login_in && to.path == '/post'){ next('/login') }else{ next(); } }) router.afterEach(function(to, from){ console.log("to", to); console.log("form", from); }); var app = new Vue({ el: '#app', router: router })