func view prev nta pre ont rev fun 全局組

路由的鉤子：（即導航守衛）

1.全局的,

const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // ... })

2.單個路由獨享的

const router = new VueRouter({ routes: [ { path: ‘/foo‘, component: Foo, beforeEnter: (to, from, next) => { // ... } } ] })

3.組件級的。

beforeRouteEnter beforeRouteUpdate (2.2 新增) beforeRouteLeave const Foo = { template: `...`, beforeRouteEnter (to, from, next) { // 在渲染該組件的對應路由被 confirm 前調用 // 不！能！獲取組件實例 `this` // 因為當守衛執行前，組件實例還沒被創建 }, beforeRouteUpdate (to, from, next) { // 在當前路由改變，但是該組件被復用時調用 // 舉例來說，對於一個帶有動態參數的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉的時候， // 由於會渲染同樣的 Foo 組件，因此組件實例會被復用。而這個鉤子就會在這個情況下被調用。 // 可以訪問組件實例 `this` }, beforeRouteLeave (to, from, next) { // 導航離開該組件的對應路由時調用 // 可以訪問組件實例 `this` } } 路由元信息：給路由表每項添加的meta

例如：

{ name:‘find‘, path:‘/find‘, component:find, meta:{ title:‘我是發現組件‘, },

=========5.16組件通訊================

組件通訊
一、組件：組件是可復用的 Vue 實例

二、創建組件：

1.全局組件 Vue.component(‘my-component-name‘, {

// ... 選項 ... })

例如：

import Vue from ‘vue‘; //定義一個全局組件 Vue.component(‘myCom1‘,{ template:"<div>我是組件{{ count }} <button @click=‘go‘>click</button></div>", data() { return { count:100 } }, methods:{ go() { console.log(‘我是組件1的go方法‘); } } }); 2.局部組件 var ComponentA = { /* ... */ } 然後在 components 選項中定義你想要使用的組件： new Vue({ el: ‘#app‘ components: { ‘component-a‘: ComponentA, }

三、組件通訊

父傳子:
1.創建兩個組件A.vue和B.vue，並在A.vue中引入B.vue，並註冊
2.在A.vue引入的子組件自身添加要傳遞的屬性

例如： <my-com1 :yonghu="user" :dizhi="address" :age="age"></my-com1> 3.在B組件中接收A.vue組件中傳遞過來的值，通過props接收 具體props有兩種寫法：數組和對象（帶驗證） 例如： export default { // props:[‘yonghu‘,‘dizhi‘,‘age‘], props:{ ‘yonghu‘:{ type:[String] }, ‘dizhi‘:{ type:String }, ‘age‘:{ type:Number, default:0 } },

子傳父：主要通過事件派發實現，具體通過$emit實現
-

派發事件：$emit() 接收事件：@事件名字v-on

路由的鉤子：（即導航守衛）