Day84 前端框架--Vue路由系統&Vue生命週期
阿新 • • 發佈：2018-12-05
一，Vue路由系統
Vue Router是Vue.js的官方路由器。它與Vue.js核心深度整合，能夠輕鬆構建單頁應用
1.路由的註冊
<body> <div id="app"> <router-link to="/">首頁</router-link> //在渲染的時候彙編翻譯為a標籤，to的引數則會作為href引數 <router-link to="/course">課程</router-link> <router-view></router-view> //渲染元件內的檢視</div> <script> // 定義路由跟元件的匹配規則 let url = [ { path: "/", component:{ template:`<div><h1>這是首頁元件</h1></div>` } }, { path: "/course", component:{ template:`<div><h1>這是課程元件</h1></div>` } } ]; //規則物件,路由跟元件的匹配規則 //例項化VueRouter( let router = new VueRouter({ routes:url, // mode:"history" //可以去掉url中的#(錨點)，但是正常正常會404 }); // 把VueRouter的例項化物件註冊到Vue的根例項裡 const app = new Vue({ el:"#app", // data: {}, router: router, }) </script> </body>
2.路由的命名引數
<body> <div id="app"> <router-link :to="{name: 'home'}">首頁</router-link> <router-link :to="{name: 'course'}">課程</router-link> <!--<router-link :to="/user/alex?age=38">使用者</router-link>--><!--硬編碼寫法--> <router-link :to="{name: 'user',params: {name: 'alex'},query: {age: 38}}">使用者</router-link> <!--params相當與django的分組命名匹配,query相當於url中?後面的引數--> <router-view></router-view> </div> <script> // 定義路由跟元件的匹配規則 let url = [ //規則物件,路由跟元件的匹配規則 { path: "/", name: "home", component:{ template:`<div><h1>這是首頁元件</h1></div>` } }, { path: "/course", name:"course", component:{ template:`<div><h1>這是課程元件</h1></div>` } }, { path: "/user/:name", // /user/alex url // {name:alex} params // (?P<name>.*) 分組命名匹配 name: "user", component: { template:`<div> <h1>這是使用者元件{{this.$route.params.name}}</h1> <h1>{{this.$route.query.age}}</h1> </div>`, mounted() { console.log(this.$route) } } } ]; //例項化VueRouter( let routers = new VueRouter({ routes:url }); const app = new Vue({ el: "#app", data: {}, router: routers }) </script> </body>
3手動路由
<body> <div id="app"> <router-link to="/">首頁</router-link> <router-link to="/course">課程</router-link> <router-link to="/login">登入</router-link> <router-view></router-view> </div> <script> // 定義路由跟元件的匹配規則 let url = [ { path: "/", component:{ template:`<div> <h1>這是首頁元件</h1> <button @click="my_click">點選我跳轉到登入頁面</button> </div>`, methods: { my_click: function () { //跳轉到登入頁面，跳轉到登入元件 console.log(this.$route); console.log(this.$router); console.log(this.$el); console.log(this.$data); //$route 路由的所有資訊 //$router 例項物件 this.$router.push("/login") //手動路由 } } } }, { path: "/course", name:"course", component:{ template:`<div><h1>這是課程元件</h1></div>` } }, { path: "/login", name:'login', component:{ template:`<div><h1>這是登入元件</h1></div>` } }, ]; //規則物件,路由跟元件的匹配規則 //例項化VueRouter( let routers = new VueRouter({ routes:url }); // 把VueRouter的例項化物件註冊到Vue的根例項裡 const app = new Vue({ el: "#app", data: {}, router: routers, }) </script> </body>
4.路由的鉤子函式
<body> <div id="app"> <router-link to="/">首頁</router-link> <router-link to="/course">課程</router-link> <router-link to="/user">檢視使用者</router-link> <router-link to="/login">登入</router-link> <router-view></router-view> </div> <script> // 定義路由跟元件的匹配規則 let url = [ { path: "/", component:{ template:`<div> <h1>這是首頁元件</h1> <button @click="my_click">點選跳轉到登入頁面</button> </div>`, methods: { my_click: function () { // 跳轉到登入頁面 跳轉到登入元件 console.log(this.$route); console.log(this.$router); console.log(this.$el); console.log(this.$data); // $route路由的所有資訊 // $router VueRouter例項化物件 this.$router.push("/login") } } } }, { path: "/course", name:'course', component:{ template:`<div><h1>這是課程元件</h1></div>` } }, { path: "/user", meta:{ //元資訊配置 required_login:true }, name:'user', component:{ template:`<div><h1>這是使用者元件</h1></div>` } }, { path: "/login", name: 'login', component:{ template:`<div><h1>這是登入元件</h1></div>` } }, ]; //規則物件,路由跟元件的匹配規則 //例項化VueRouter( let routers = new VueRouter({ routes:url, mode:'history' }); routers.beforeEach(function (to,from,next) { //鉤子函式(Vue路由的例項方法),用於校驗訪問狀態，一般用於重定向或取消訪問 console.log(to); //要訪問的目標path，物件{。。} console.log(from); //當前的path，物件{。。} console.log(next);// 下一步的動作 // if (to.path == "/user"){ // next("/login") // } if (to.meta.required_login){ next("login") // 重定向+反向解析 } next(); //必須寫,如果沒有傳值，則繼續訪問to。不寫，或者next(false)路由down，中止訪問 }); routers.afterEach(function (to,from) { //只用於獲取你從哪裡來的路由資訊 }); // 把VueRouter的例項化物件註冊到Vue的根例項裡 const app = new Vue({ el: "#app", data: {}, router: routers // 註冊 }) </script> </body>
5.子路由的註冊
<body> <div id="app"> <router-link to="/">首頁</router-link> <router-link to="/course">課程</router-link> <router-link to="/course/detail">課程詳情</router-link> <router-view></router-view> </div> <script> // 定義路由跟元件的匹配規則 let url = [ //規則物件,路由跟元件的匹配規則 { path: "/", component:{ template:`<div><h1>這是首頁元件</h1></div>` } }, { path: "/course", component:{ template:`<div><h1>這是課程元件</h1></div>` } }, { path: "/course/detail", redirect:{name:'brief'}, component:{ template:`<div> <h1>這是課程詳情元件</h1> <hr> <router-link :to="{name:'brief'}">課程概述</router-link> <router-link to="/course/detail/chapter">課程章節</router-link> <router-view></router-view> </div>` }, children:[ { // path: "/course/detail/brief", path: "brief", //路由拼接 name:"brief", //反向解析 component:{ template:`<div><h1>這是課程概述元件</h1></div>` }, }, { // path: "/course/detail/chapter", path: "chapter",//不使用反向解析的話，則與父路由url拼接 // name:"chapter", component:{ template:`<div><h1>這是課程章節元件</h1></div>` }, } ] } ]; //例項化VueRouter( let routers = new VueRouter({ routes:url }); const app = new Vue({ el: "#app", data: {}, router: routers }) </script> </body>
6.命名的路由檢視
<style> .myfooter { position: fixed; bottom: 0; } </style> </head> <body> <div id="app"> <router-link to="/">首頁</router-link> <router-link to="/course">課程</router-link> <router-link to="/user">使用者</router-link> <!--加樣式類可以分割槽域展示,可以分別繫結不同的樣式類--> <router-view name="head" class="myheader"></router-view> <router-view name="foot" class="myfooter"></router-view> <router-view></router-view> <!--錨點--> </div> <script> // 定義路由跟元件的匹配規則 let url = [ { path: "/", component:{ template:`<div><h1>這是首頁元件</h1></div>` } }, { path: "/course", component:{ template:`<div><h1>這是課程元件</h1></div>` } }, { path: "/user", components:{ head:{ //自定義命名的檢視 template:`<div><h1>這是使用者頭部元件</h1></div>` }, foot:{ //自定義命名的檢視 template:`<div><h1>這是使用者底部元件</h1></div>` }, } } ]; //規則物件,路由跟元件的匹配規則 //例項化VueRouter( let routers = new VueRouter({ routes:url, mode:"history" }); const app = new Vue({ el: "#app", data: {}, router: routers }) </script> </body>
二，Vue的生命週期
<body> <div id="app"> <p>{{name}}</p> </div> <script> const app = new Vue({ el: "#app", data: { name: "alex" }, methods: { init: function (){ console.log(123) } }, beforeCreate() { console.group("BeforeCreate"); //建立例項之前 console.log(this.$el); // undefined console.log(this.name); // undefined console.log(this.init); }, created(){ console.group("created"); //建立例項完成 console.log(this.$el); // undefined 必須指定根例項的作用域，否則阻塞在此生命週期 console.log(this.name); // 已被初始化 console.log(this.init); // 已被初始化 }, beforeMount(){ //掛載前的狀態是虛擬DOM技術，先把坑站住了~掛載之後才真正的把值渲染進去 console.group("beforeMount"); //掛載前狀態 console.log(this.$el); // 已被初始化 console.log(this.name); // 已被初始化 console.log(this.init); // 已被初始化 }, mounted(){ console.group("mounted"); //掛載結束狀態 console.log(this.$el); // 已被初始化 console.log(this.name); // 已被初始化 console.log(this.init); // 已被初始化 }, beforeUpdate(){ //當更新data時，就觸發這個update函式 console.group("beforeUpdate"); console.log(this.$el); console.log(this.name); //資料已改變，所有編譯和渲染的都是那個的資料 console.log(this.init); }, updated(){ console.group("updated"); console.log(this.$el); console.log(this.name); console.log(this.init); }, // 在瀏覽器console裡執行命令：app.$destroy(); //觸發了destroy相關的鉤子函式，也就是說元件被銷燬 // 更改data中的資料~DOM中的值不變~也就是說DOM元素依然存在只是不受vue控制了 beforeDestory(){ console.group("beforeDestoryed"); console.log(this.$el); console.log(this.name); console.log(this.init); }, destory(){ console.group("destory"); console.log(this.$el); console.log(this.name); console.log(this.init); }, }) </script> </body>