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

時間  2019-11-12
標籤 vuerouter vue 生命週期 鉤子 函數 简体版
原文   原文鏈接

1、vue-router路由

一、介紹

vue-router是Vue的路由系統，用於定位資源的，在頁面不刷新的狀況下切換頁面內容。
相似於a標籤，實際上在頁面上展現出來的也是a標籤，是錨點。
router須要相應的js文件，可到官網下載或者使用CDN: https://unpkg.com/vue-router/dist/vue-router.js
使用Vue須要引入相應的JS文件，可到官網下載或者直接使用CDN：https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.jshtml

 

二、路由註冊

1. 定義一個路由匹配規則和路由對應組件的對象vue

複製代碼 
let url = [
    {
        path: "/",  // 路由
        component: {  // 組件：component單數時，表明這個組件就是這個url的惟一組件，所以不須要寫組件名
        }
    }
]
複製代碼

2. 實例化VueRouter對象 並把匹配規則註冊進去python

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

3. 把VueRouter實例化對象註冊Vue的根實例vue-router

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

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

5. router-view
　　展現router-link的視圖瀏覽器

6. demoapp

<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

 

三、命名路由及參數

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__: Objectide

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

 

四、手動路由

1. 注意：$route是路由的全部信息，而$router是VueRouter實例化對象
2. $router.push 把這個router對象跳轉到哪裏
3. 手動路由的兩種寫法
this.$router.push("/login")
this.$router.push({name:'login', params:{},query: {})post

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

 

五、路由的鉤子函數

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.原信息重定向

   meta：{
      required_login: true
   }
   redirect: "/"

5. demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

</head>
<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",
            component: {
                template: `<div><h1>這是課程組件</h1></div>`
            }
        },
        {
            path: "/login",
            name: 'login',
            component: {
                template: `<div><h1>這是登陸組件</h1></div>`
            }
        },
        {
            path: "/user",
            meta: {
                required_login: true
            },
            name: 'user',
            component: {
                template: `<div><h1>這是用戶組件</h1></div>`
            }
        },


    ];
    // 實例化VueRouter對象
    let router = new VueRouter({
        routes: url,
        mode: 'history' //去除url裏面的#號
    });
    router.beforeEach(function (to, from, next) {
        console.log(to) // 你去哪裏
        console.log(from) // 你從哪裏來
        console.log(next) // 你下一步要作什麼
        // if(to.path == "/user"){
        //     next("/login")
        // }
        if(to.meta.required_login){
            next("login")
        }
        next()//必須寫，調到原來的url
    })
    router.afterEach(function (to, from) {
        // 只用於獲取你從哪裏來的路由信息
    })
    // 把VueRouter的實例化對象註冊到Vue的根實例裏
    const app = new Vue({
        el: "#app",
        router: router
    })
</script>

</body>
</html>

 

六、子路由的註冊

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

 

七、命名路由視圖

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

 

2、Vue的生命週期及其鉤子函數

一、圖示

 

對比

 

二、demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/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

 

三、create 和 mounted 相關

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

 

四、update 相關

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

 

五、destroy 相關

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

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程