VueRouter

特點：通過路由和組件實作一個單頁面的應用，

路由的注冊：靜態路由

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

<body>

    首頁
    課程
    

<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
    });
    // 把VueRouter的實體化物件注冊到Vue的跟實體
    const app = new Vue({
        el:"#app",
        router:router
    })
</script>
</body>
</html>

路由的注冊：動態路由（路由的引數）

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

<body>

    
    路由的注冊：自定義路由
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src=https://www.cnblogs.com/wylshkjj/p/"https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    Title

<body>

    
    首頁
    課程
    登錄
    

<script>
    // 定義路由匹配規則
    let url = [
        {
            path:"/",
            component:{
                template:'' +
                    '<div>' +
                        '<h1>首頁組件</h1>' +
                        '<button @click="my_click">點擊跳轉登錄頁面</button>' +
                    '</div>',
                methods:{
                    my_click: function(){
                        
                        console.log(this.$route);
                        // $route 當前路由的所有資訊
                        console.log(this.$router);
                        // $router VueRouter的實體化物件
                        console.log(this.$el);
                        console.log(this.$data);
                        this.$router.push("/login")
                        // 跳轉頁面 --> 跳轉到登錄組件
                    }
                }
            }
        },
        {
            path:"/course",
            component:{
                template:'<div><h1>課程組件</h1></div>'
            }
        },
        {
            path:"/login",
            component:{
                template:'' +
                    '<div>' +
                        '<h1>登錄組件</h1>' +
                    '</div>'
            }
        }
    ];
    // 實體化VueRouter物件
    let router = new VueRouter({
        routes:url
    });
    // 把VueRouter的實體化物件注冊到Vue的跟實體
    const app = new Vue({
        el:"#app",
        router:router
    })
</script>
</body>
</html>

路由的鉤子函式：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src=https://www.cnblogs.com/wylshkjj/p/"https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    Title

<body>

    
    首頁
    課程
    用戶
    登錄
    

<script>
    // 定義路由匹配規則
    let url = [
        {
            path:"/",
            component:{
                template:'' +
                    '<div>' +
                        '<h1>首頁組件</h1>' +
                        '<button @click="my_click">點擊跳轉登錄頁面</button>' +
                    '</div>',
                methods:{
                    my_click: function(){

                        console.log(this.$route);
                        // $route 當前路由的所有資訊
                        console.log(this.$router);
                        // $router VueRouter的實體化物件
                        console.log(this.$el);
                        console.log(this.$data);
                        // 跳轉頁面 --> 跳轉到登錄組件
                        this.$router.push("/login")
                    }
                }
            }
        },
        {
            path:"/course",
            component:{
                template:'<div><h1>課程組件</h1></div>'
            }
        },
        {
            path:"/login",
            component:{
                template:'' +
                    '<div>' +
                        '<h1>登錄組件</h1>' +
                    '</div>'
            }
        },
        {
            path:"/user",
            meta:{
                required_login: true
            },
            component:{
                template:'' +
                    '<div>' +
                        '<h1>用戶組件</h1>' +
                    '</div>'
            }
        }
    ];
    // 實體化VueRouter物件
    let router = new VueRouter({
        routes:url,
        mode:'history' // 清除路徑
    });
    router.beforeEach(function (to, from, next) {
        console.log(to); // 跳轉到哪里
        console.log(from); // 從哪來
        console.log(next); // 下一步做什么
        // 直接路徑判斷
        // if(to.path == "/user"){
        //     next("/login");
        // }
        // 使用meta判斷（配置方便）
        if(to.meta.required_login){
            next("login");
        }
        next();
    });
    // router.afterEarch(function(to, from){
        // 智能識別路由要去哪和從哪來，一般用于獲取路由從哪來
    // });
    // 把VueRouter的實體化物件注冊到Vue的跟實體
    const app = new Vue({
        el:"#app",
        router:router
    })
</script>
</body>
</html>

子路由的注冊：靜態路由
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src=https://www.cnblogs.com/wylshkjj/p/"https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    Title

<body>

    
    首頁
    課程
    課程詳情
    

<script>
    // 定義路由匹配規則
    let url = [
        {
            path:"/",
            component:{
                template:'' +
                    '<div>' +
                        '<h1>首頁組件</h1>' +
                    '</div>'
            }
        },
        {
            path:"/course",
            component:{
                template:'' +
                    '<div>' +
                        '<h1>課程組件</h1>' +
                    '</div>'
            }
        },
        {
            path:"/course/detail",
            component:{
                template:'' +
                    '<div>' +
                        '<h1>課程詳情組件</h1>' +
                        '<hr>' +
                        '<router-link to="/course/brief">課程概述</router-link> ' +
                        ' <router-link to="/course/chapter">課程章節</router-link>' +
                        '<router-view></router-view>' +
                    '</div>'
            },
            children:[
                {
                    path:"/course/brief",
                    component:{
                        template:'' +
                            '<div>' +
                                '<h1>課程概述組件</h1>' +
                            '</div>'
                    }
                },{
                    path:"/course/chapter",
                    component:{
                        template:'' +
                            '<div>' +
                                '<h1>課程章節組件</h1>' +
                            '</div>'
                    }
                },
            ]
        }
    ];
    // 實體化VueRouter物件
    let router = new VueRouter({
        routes:url
    });
    // 把VueRouter的實體化物件注冊到Vue的跟實體
    const app = new Vue({
        el:"#app",
        router:router
    })
</script>
</body>
</html>

子路由的注冊：動態路由
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src=https://www.cnblogs.com/wylshkjj/p/"https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    Title

<body>

    
    首頁
    課程
    課程詳情
    

<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/chapter">課程章節</router-link>' +
                        '<router-view></router-view>' +
                    '</div>'
            },
            children:[
                {
                    path:"brief",
                    name:"brief",
                    component:{
                        template:'' +
                            '<div>' +
                                '<h1>課程概述組件</h1>' +
                            '</div>'
                    }
                },{
                    path:"/course/chapter",
                    name:"chapter",
                    component:{
                        template:'' +
                            '<div>' +
                                '<h1>課程章節組件</h1>' +
                            '</div>'
                    }
                },
            ]
        }
    ];
    // 實體化VueRouter物件
    let router = new VueRouter({
        routes:url
    });
    // 把VueRouter的實體化物件注冊到Vue的跟實體
    const app = new Vue({
        el:"#app",
        router:router
    })
</script>
</body>
</html>

命名的路由視圖
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src=https://www.cnblogs.com/wylshkjj/p/"https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    Title

<body>

    
    首頁
    課程
    用戶
    
    
    

<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>用戶head</h1>' +
                    '</div>'
                },
                footer:{
                    template:'' +
                    '<div>' +
                        '<h1>用戶footer</h1>' +
                    '</div>'
                }
            }
        }
    ];
    // 實體化VueRouter物件
    let router = new VueRouter({
        routes:url,
        mode:'history' // 清除路徑
    });
    router.beforeEach(function (to, from, next) {
        next();
    });
    // 把VueRouter的實體化物件注冊到Vue的跟實體
    const app = new Vue({
        el:"#app",
        router:router
    })
</script>
</body>
</html>

Vue的路由：
注冊：

-- 定義一個匹配規則物件

let url = [

{

path:"/",

component:{}
?				}

?			]

?		-- 實體化VueRouter物件 并把匹配規則注冊進去

?			let router = new VueRouter({

?				routes:url

?			})

?		-- 把VueRouter實體化物件注冊到Vue的根實體

?			const app = new Vue({

?				el:""

?			})

?		-- router-link

?		-- router-view
子路由的注冊

-- 在父路由里注冊children：[{},{}]

-- 在父路由對應的組件里的template里寫 router-link router-view
路由的名命

-- name

-- 注意 to 一定動態系結  ：to=" {name:' '} "
路由的引數

this.$route.params.xxxx

this.$route.query.xxxx
自定義路由

this.$router.push("/course")

this.$router.push({name:' ', params:{ },query:{}})
路由的鉤子函式

router.beforeEach(function(to, from, next){

to	路由去哪

from	路由從哪來

next	路由接下來要做什么

}) # 一般用于攔截

router.afterEach(function(to, from){

}) # 一般用于獲取
注意

$route    路由的所有資訊組成的物件

$router   VueRouter 實體化物件

redirect  路由的重定向






        
      轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/2351.html
      標籤：HTML5 
      上一篇：微信小程式中canvas繪制圖表層級問題
下一篇："靜態控制元件"組件:<static> —— 快應用組件庫H-UI