元數據及路由匹配
阿新 • • 發佈：2018-01-31
log () utf utf-8 set gin als cti 首頁
<!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> <router-link to="/a">A</router-link> </div> <div> <router-view></router-view> </div> </div> <script src="../../lib/vue.js"></script> <script src="../../lib/vue-router.js"></script> <script src="js/main.js"></script> </body> </html>
var routes = [ { path: "/", component: { template: ` <h1>首頁管理</h1> ` } }, { path: "/login", component: { template: `<h1>用戶登錄</h1> ` } }, { path: "/a", meta:{ login_required:false }, component: { template: ` <h1>A</h1> ` } }, { path: "/post", meta:{ login_required:true }, component: { template: ` <h1>帖子管理</h1> <router-link to="/rain" append>點擊you驚喜</router-link> <router-view></router-view> ` }, children:[ { path:"rain", component:{ template:"<h1>內涵段子</h1>" } } ] }, ]; var router = new VueRouter({ routes: routes }); router.beforeEach(function (to,from ,next) { //類似於中間件 ，訪問之前做判斷 var logged_in = true; //用戶未登錄狀態 if(!logged_in && to.match(function (item) { return item.meta.login_required })) //如果用戶未登錄且要跳轉到post頁面 next("/login"); else next() //正常執行 }); router.afterEach(function (to,from) { //執行完之後要執行的函數 }) new Vue({ el: "#app", router: router })
元數據及路由匹配