2. 程式人生 > >VueRouter和Vue生命週期(鉤子函式)

VueRouter和Vue生命週期(鉤子函式)

阿新 • • 發佈：2018-12-05

一、vue-router路由

1、介紹

vue-router是Vue的路由系統，用於定位資源的，在頁面不重新整理的情況下切換頁面內容。
類似於a標籤，實際上在頁面上展示出來的也是a標籤，是錨點。

 

2、路由註冊

1. 定義一個路由匹配規則和路由對應元件的物件

let url = [
    {
        path: "/",  // 路由
        component: {  // 元件：component單數時，代表這個元件就是這個url的唯一元件，因此不需要寫元件名
        }
    }
]

2. 例項化VueRouter物件 並把匹配規則註冊進去

let my_router = new VueRouter({
    routes: url,
    // 路由去掉#
    mode: 'history'
})

3. 把VueRouter例項化物件註冊Vue的根例項

const app = new Vue({
    el: "#app",
    router: my_router
})

4. router-link
　　把匹配規則轉成a標籤

5. router-view
　　路由的元件顯示的區域

6. demo

<body>
<div id="app"
 
>
    <router-link to="/">首頁</router-link>
    <router-link to="/class">班級</router-link>
    <router-view></router-view>
</div>

<script>
    // 定義路由匹配規則和路由對應的元件物件
    let url = [
        {
            path: "/",
            component: {// component單數時，代表這個元件就是這個url的唯一元件，因此不需要寫元件名,直接寫配置資訊即可
 

                template: `<div><h1>你好！這是首頁</h1></div>`
            }
        },
        {
            path: "/class",
            component: {
                template: `<div><h1>這是班級資訊</h1></div>`
            }
        }
    ];

    // 例項化VueRouter物件，並把url註冊進去
    let my_router = new VueRouter({
        routes: url,
        // 路由去掉#
        mode: 'history'
    });

    // 把VueRouter例項物件註冊到Vue的根例項裡
    const app = new Vue({
        el: "#app",
        router: my_router
    })

</script>
</body>
View Code

 

3、命名路由及引數

1. 注意：要使用命名路由，那麼命名路由的router-link裡to一定要v-bind，可以簡寫 :to
2. Vue的路由中，路由命名相當於python的路由別名，用name命名
3. 如果路由中需要在路由中加引數，則使用params
4. 如果在路由後面新增?搜尋引數，則使用query
5. 要使用這些引數，則用this.$route，route是路由的所有資訊
6. $route的引數
　　fullPath: "/student/ming?age=38" # 包含？引數的路徑
　　hash: ""
　　matched: [{…}] # 路由匹配的正則
　　meta: {} # 元資訊
　　name: "student" # 路由別名
　　params: {sname: "ming"} # 路由引數
　　path: "/student/ming" # 不含？引數的路徑
　　query: {age: 38} # ？引數
　　__proto__: Object

7. demo

<body>
<div id="app">
    <router-link v-bind:to="{name: 'home'}">首頁</router-link>

    <router-link to="/class?class_id=1">班級</router-link>
    <!--<router-link :to="{name: 'class', query: {class_id: 1}}">班級</router-link>-->

    <!--<router-link to="/student/ming?age=38">使用者</router-link>-->
    <router-link :to="{name: 'student', params: {sname: 'ming'}, query: {age: 38}}">學生</router-link>
    <router-view></router-view>
</div>

<script>
    let url = [
        {
            path: '/',
            name: 'home',
            component: {
                template: `<div><h1>你好！這是首頁</h1></div>`
            }
        },
        {
            path: '/class',
            name: 'class',
            component: {
                template: `<div><h1>這是{{this.$route.query.class_id}}班</h1></div>`
            }
        },
        {   // 在路由中新增引數使用  :name
            path: '/student/:sname',
            name: 'student',
            component: {
                template: `<div>
                        <h1>這是{{this.$route.params.sname}}年齡是{{this.$route.query.age}}</h1>
                        </div>`,
                mounted(){
                    console.log(this.$route)
                }
            }

        }
    ];

    // 例項化VueRouter物件
    let my_router = new VueRouter({
        routes: url,
        mode: 'history'
    });

    // 把VueRouter例項註冊到Vue根例項
    const app = new Vue({
        el: "#app",
        router: my_router,
    })

</script>
</body>
View Code

 

4、手動路由

1. 注意：$route是路由的所有資訊，而$router是VueRouter例項化物件
2. $router.push 把這個router物件跳轉到哪裡
3. 手動路由的兩種寫法
this.$router.push("/login")
this.$router.push({name:'login', params:{},query: {})

4. demo

<body>
<div id="app">
    <router-link to="/">首頁</router-link>
    <router-link to="/class">班級</router-link>
    <router-link :to="{name:'login'}">登入</router-link>
    <router-view></router-view>
</div>

<script>
    // 定義路由匹配規則和路由對應的元件物件
    let url = [
        {
            path: "/",
            component: {
                template: `<div>
                        <h1>你好！這是首頁</h1>
                        <button v-on:click="my_click">點選跳轉到登入頁面</button>
                        </div>`,
                methods: {
                    my_click: function () {
                        // $route 路由的所有資訊
                        // $router VueRouter例項化物件
                        console.log(this.$route);
                        console.log(this.$router);
                        // push跳轉到登入頁面
                        // this.$router.push("/login")
                        this.$router.push({name: "login"})
                    }
                }
            }
        },
        {
            path: "/class",
            component: {
                template: `<div><h1>這是班級資訊</h1></div>`
            }
        },
        {
            path: "/login",
            name: "login",
            component: {
                template: `<div><h1>這是登入頁面</h1></div>`
            }
        }
    ];

    // 例項化VueRouter物件，並把url註冊進去
    let my_router = new VueRouter({
        routes: url,
        // 路由去掉#
        mode: 'history'
    });

    // 把VueRouter例項物件註冊到Vue的根例項裡
    const app = new Vue({
        el: "#app",
        router: my_router
    })

</script>
</body>
View Code

 

5、路由的鉤子函式

1. 路由鉤子函式：一個路由跳轉到另一個路由(還沒到)的過程中觸發 beforeEach(function (to, from, next) {}
2. 路由鉤子函式：一個路由已經跳轉到了另一個路由後觸發 afterEach(function (to, from) {}
3. 引數： 
　　to 你要去哪裡
　　from 你從哪裡來
　　next 你接下來要做什麼
4. next的引數詳解
　　next(function) 一定要呼叫這個方法來resolve這個鉤子函式。執行效果依賴next方法的呼叫引數
　　next() 什麼都不做繼續執行到調轉的路由
　　next(false) 中斷當前導航 沒有跳轉 也沒有反應
　　next("/") 引數是路徑 調轉到該路徑
　　next(error) 如果next引數是一個Error例項 導航終止該錯誤，會傳遞給router.onError()註冊過的回撥中

5. demo

<body>
<div id="app">
    <router-link to="/">首頁</router-link>
    <router-link :to="{name: 'class', query: {class_id: 1}}">班級</router-link>
    <router-link :to="{name: '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 () {
                        this.$router.push("/login")
                    }
                }
            }
        },
        {
            path: '/class',
            name: 'class',
            component: {
                template: `<div><h1>這是{{this.$route.query.class_id}}班的資訊</h1></div>`
            }
        },
        {
            path: '/login',
            name: 'login',
            component: {
                template: `<div>
                        <h1>這是登入頁面</h1>
                        </div>`
            }
        },
        {
            path: '/user',
            name: 'user',
            meta: {
                // 設定元資訊
                required_login: true
            },
            component: {
                template: `<div><h1>這是使用者元件</h1></div>`
            }
        }
    ];

    // 例項化VueRouter物件
    let my_router = new VueRouter({
        routes: url,
        mode: 'history'
    });

    // 路由my_router的鉤子函式：一個路由跳轉到另一個路由(還沒到)的過程中觸發
    my_router.beforeEach(function (to, from, next) {
        console.log(to);  // 你要去哪裡
        console.log(from);  // 你從哪裡來
        console.log(next);  // 你接下來要做什麼
        if(to.meta.required_login){
            next('/login')
        }else{
            next();
        }
    });

    // 路由my_router的鉤子函式：一個路由已經跳轉到了另一個路由後觸發
    my_router.afterEach(function (to, from) {
       // 一般只用於獲取你從哪裡來的路由資訊
        console.log(to);  // 你要去哪裡
        console.log(from);  // 你從哪裡來
    });

    // 把VueRouter例項註冊到Vue根例項
    const app = new Vue({
        el: "#app",
        router: my_router,
    })

</script>
</body>
View Code

 

6、子路由的註冊

1. 在父路由裡註冊children: [{},{}]
2. 在父路由對應的元件裡的template裡寫router-link router-view
3. redirect:重定向到某個頁面
4. 子路由的path不寫"/"字首，則會自動跟父級路由拼接
5. 如果寫了"/"字首，那麼path就是你寫的路徑
6. 點選子路由連線，會觸發其父路由，子路由的template只會顯示父路由的template裡面
7. 子路由可以直接在Vue作用域使用，但還是會觸發它的父路由的template

8. demo

<body>
<div id="app">
    <router-link to="/">首頁</router-link>
    <router-link to="/class">班級</router-link>
    <router-link to="/class/info">班級資訊</router-link>
    <router-link :to="{name: 'grade'}">年級</router-link>
    <router-view></router-view>
</div>

<script>
    let url = [
        {
            path: '/',
            component: {
                template: `<div><h1>你好！這是首頁</h1></div>`
            }
        },
        {
            path: '/class',
            component: {
                template: `<div><h1>這是班級</h1></div>`
            }
        },
        {
            path: '/class/info',
            // 路由重定向redirect，進入/class/info，就會重定向到/class/info/grade
            // redirect: {name: 'grade'},
            component: {
                template: `<div>
                        <h1>這是班級詳細資訊</h1>
                        <hr>
                        <router-link :to="{name: 'grade'}">所在年級</router-link>
                        <router-link to="/class/class_id">所在班級</router-link>
                        <router-view></router-view>
                        </div>`,
            },
            children: [
                {
                    // 沒寫字首會直接拼接在父級路由後 path: /class/info/grade
                    path: "grade",
                    // 路由別名
                    name: 'grade',
                    component: {
                        template: `<div><h2>一年級</h2></div>`
                    }
                },
                {
                    // 自己直接寫路由，不會拼接在父級路由後
                    path: "/class/class_id",
                    component: {
                        template: `<div><h2>3班</h2></div>`
                    }
                }
            ],
        },
    ];

    // 例項化VueRouter物件
    let my_router = new VueRouter({
        routes: url,
        mode: 'history'
    });

    // 把VueRouter例項註冊到Vue根例項
    const app = new Vue({
        el: "#app",
        router: my_router,
    })

</script>
</body>
View Code

 

7、命名路由檢視

1. 當我們只有一個<router-view></router-view>的時候，所有內容都展示在這一個面板裡面。
如果是content和footer需要同時顯示在不同區域，這就需要對檢視進行命名。
2. 路由中使用components(是複數),{元件名1: 配置資訊1, 元件名2: 配置資訊2}
3. 在HTML檢視中使用<router-view name="header"></router-view>區分不同的元件

4. demo

<body>
<div id="app">
    <router-link to="/">首頁</router-link>

    <router-link to="/class">班級</router-link>
    <router-link to="/class/info">班級資訊</router-link>
    <router-view name="header"></router-view>
    <router-view name="footer" style="position: fixed;bottom: 0"></router-view>
    <router-view></router-view>
</div>

<script>
    let url = [
        {
            path: '/',
            component: {
                template: `<div><h1>你好！這是首頁</h1></div>`
            }
        },
        {
            path: '/class',
            component: {
                template: `<div><h1>這是班級</h1></div>`
            }
        },
        {
            path: '/class/info',
            // components 複數 有多個元件，要寫元件名
            components: {
                header: {
                    template: `<div><h1>這是班級頭</h1></div>`
                },
                footer: {
                    template: `<div><h1>這是班級尾</h1></div>`
                }
            },
        },
    ];

    // 例項化VueRouter物件
    let my_router = new VueRouter({
        routes: url,
        mode: 'history'
    });

    // 把VueRouter例項註冊到Vue根例項
    const app = new Vue({
        el: "#app",
        router: my_router,
    })

</script>
</body>
View Code

 

二、Vue的生命週期及其鉤子函式

1、圖示

 

對比

 

2、demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

</head>
<body>
<div id="app">
    {{name}}
</div>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            name: "明哥"
        },
        methods: {
            init: function () {
                console.log(123)
            }
        },
        beforeCreate(){
            console.group("BeforeCreate");
            console.log(this.$el);
            console.log(this.name);
            console.log(this.init);
        },
        created(){
            console.group("Create");
            console.log(this.$el);
            console.log(this.name);
            console.log(this.init);
        },
        beforeMount(){
            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(){
            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);
        },
        beforeDestroy(){
            console.group("BeforeDestroy");
            console.log(this.$el);
            console.log(this.name);
            console.log(this.init);
        },
        destroyed(){
            console.group("Destroy");
            console.log(this.$el);
            console.log(this.name);
            console.log(this.init);
        }
    })
</script>

</body>
</html>
View Code

 

3、create 和 mounted 相關

執行上面程式碼，可以看到：
　　beforecreated ：el 和 data 並未初始化
　　created：完成了data資料的初始化 el 沒有
　　beforeMount：完成了el 和 data的初始化
　　mounted：完成了掛載
　　也就是說，掛載前的狀態是虛擬DOM技術，先把坑站住了，掛載之後才真正的把值渲染進去

 

4、update 相關

　　我們在瀏覽器console裡執行命令：
　　app.message = "girl"
　　我們就觸發了update相關的鉤子函式，也就是說data裡的值被修改會出發update的操作

 

5、destroy 相關

　　我們在瀏覽器console裡執行命令：
　　app.$destroy();
　　觸發了destroy相關的鉤子函式，也就是說元件被銷燬
　　更改message的值，DOM中的值不變，也就是說DOM元素依然存在只是不受vue控制了

 

相關推薦

VueRouter和Vue生命週期(鉤子函式)

一、vue-router路由 1、介紹 vue-router是Vue的路由系統，用於定位資源的，在頁面不重新整理的情況下切換頁面內容。類似於a標籤，實際上在頁面上展示出來的也是a標籤，是錨點。   2、路由註冊 1. 定義一個路由匹配規則和路由對應元件的物件 let url = [

對Vue生命週期鉤子函式的理解

對Vue生命週期鉤子函式的理解 例項建立之後，初始化事件和生命週期，而後觸發beforeCreate。beforeCreate，當前例項建立之前，很少操作，一般用於載入動畫，比如建立一個旋轉動畫。created表示當前例項建立完成，元件、屬性等初始化完成，一般封裝一個方法，從網路請求資料

Vue的生命週期鉤子函式

1、beforeCreate():元件例項剛剛被建立 (el和data並未初始化) 2、created():元件建立完成,屬性已繫結,但DOM還未生成,$el屬性還不存在 (完成data資料的初始化)，: 例項已經建立完成之後呼叫,在這一步,例項已經完成資料觀測, 屬性和方法的運算, watch/event

前端框架vue.js系列（10）：生命週期鉤子函式

每個vue例項在被建立之前都要經過一系列的初始化過程。例如需要設定資料監聽、編譯模板、掛載例項到dom、在資料變化時更新dom等。同時在這個過程中也會執行一些叫做生命週期鉤子的函式，給予使用者機會在一些特定的場景下新增他們自己的程式碼。 下圖說明了例項的生命週期。你不需要立

vue的生命週期鉤子函式與自定義指令鉤子函式

Vue.directive('hello',{ bind:function(el){ console.log("bind時父節點為:"+el.parentNode) console.log("觸發bind指令鉤子函式") },

vue過渡動畫的生命週期/鉤子函式

 相信大家都會看到使用vue外掛的時候，那一連串的函式是什麼意思呢？ vue中所有的鉤子函式： beforeCreate（建立前） created（建立後） beforeMount（載入前） mounted（載入後） beforeUpdate（更新前） up

vue.js生命週期鉤子函式及快取

生命週期 在工作中用到最多的就是created,mounted,activated，deactivated. 由於系統需要快取，使用了keep-alive

react元件生命週期鉤子函式

掛載期 constructor 資料接收 實現繼承super(props) componentWillMount 資料掛載之前 可以操作資料 不可以操作dom componentDidMount 資料掛載之後 可以操作資料和dom render 渲染元件 和 html 標籤 更新期

react 的生命週期鉤子函式

上篇文章我們學習了 state，用以跟蹤元件的內部狀態。 今天，我們將暫停具體的元件實現，轉而來談談 react 元件在應用程式中是如何存在的，也就是 react 元件的生命週期。 當應用程式使用 React 框架時，就可以使用該框架提供的一些生命週期鉤子函式，

vue生命週期鉤子小結

前言： 該文章是自己在學習vue過程中自己的一點總結，完全按照自己的理解，有些地方術語不正確，理解有錯的，歡迎指正。 vue官方  生命週期鉤子：  https://cn.vuejs.org/v2/api/#beforeCreate beforeCr

react中的生命週期鉤子函式? 每個都是幹什麼用的?

首先react有10個生命週期鉤子函式 掛載期 constructor 資料接收 實現繼承super(props) componentWillMount 資料掛載之前 可以操作資料 不可以操作dom componentDidMount 資料掛載

總結vue生命週期鉤子使用方法

前言 在使用vue一個多禮拜後，感覺現在還停留在初級階段，雖然知道怎麼和後端做資料互動，但是對於mounted這個掛載還不是很清楚的。放大之，對vue的生命週期不甚瞭解。只知道簡單的使用，而不知道為什麼，這對後面的踩坑是相當不利的。 因為我們有時候會在幾個鉤子函式裡做一些

React 較難理解的生命週期鉤子函式

1. constructor 在react中，class 裡的constructor 方法 用來初始化state和繫結事件方法 其中，super作為方法執行父類的建構函式，引數為props 即接受父元件傳入的props 如果沒有執行super, r

Vue生命週期和鉤子函式的一些理解

vue生命週期簡介 咱們從上圖可以很明顯的看出現在vue2.0都包括了哪些生命週期的函數了。 生命週期探究 對於執行順序和什麼時候執行，看上面兩個圖基本有個瞭解了。下面我們將結合程式碼去看看鉤子函式的執行。 ps:下面程式碼可以直接複製出去執行 <

vue生命週期，鉤子函式

vue生命週期簡介和鉤子函式 一、vue生命週期簡介 咱們從上圖可以很明顯的看出現在vue2.0都包括了哪些生命週期的函數了，總結一下，對官方文件的那張圖簡化一下，就得到了這張圖。 二、生命週期探究 對於執行順序和什麼時候執行，看上面圖基本有個瞭解了。下面我們將結

Vue-生命週期（鉤子函式）

參考：https://cn.vuejs.org/v2/guide/instance.html 每個 Vue 例項在被建立時都要經過一系列的初始化過程——例如，需要設定資料監聽、編譯模板、將例項掛載到 DOM 並在資料變化時更新 DOM 等。同時在這個過程中也會執行一些叫做生命週期鉤子的函式，這給

Vue入門和基礎——生命週期函式

Vue入門和基礎（二） 生命週期函式： 每個Vue例項被建立的時候都要經歷一系列的初始化過程，這個過程就是Vue的生命週期 先上一張官圖 其實官網上已經表明的很詳細了，從圖中我們可以看一個Vue例項的一整個生命週期中有很多個鉤子函式，不用的鉤子函式提供給我們在不同的時期進行操作，如

Vue的鉤子函式[路由導航守衛、keep-alive、生命週期鉤子]

前言 說到Vue的鉤子函式，可能很多人只停留在一些很簡單常用的鉤子(created,mounted)，而且對於裡面的區別，什麼時候該用什麼鉤子，並沒有仔細的去研究過，且Vue的生命週期在面試中也算是比較高頻的考點，那麼該如何回答這類問題，讓人有眼前一亮的感覺呢... 游

詳解Vue的鉤子函式(路由導航守衛、keep-alive、生命週期鉤子)

說到Vue的鉤子函式，可能很多人只停留在一些很簡單常用的鉤子(created,mounted)，而且對於裡面的區別，什麼時候該用什麼鉤子，並沒有仔細的去研究過，且Vue的生命週期在面試中也算是比較高頻的考點，那麼該如何回答這類問題，讓人有眼前一亮的感覺呢… Vue-Router導航守衛：

Vue生命週期與鉤子函式

Vue官網的生命週期圖 常用的八個鉤子函式的解釋 beforeCreated:元件例項剛剛被建立，元件屬性計算之前，如data屬性等。 created：元件例項建立完成，屬性已繫結，但DOM還未生成，$el屬性還不存在 beforeMount：模板掛載之前呼叫，$