文章目錄

一、路由的基本概念：

1. 路由：

路由是一個比較廣義和抽象的概念, 路由的本質就是對應關係;
在開發中, 路由分爲:

後端路由;
前端路由;

2. 後端路由:

2.1 後端路由的概念與本質:

概念: 根據不同的用戶url請求, 返回不同的內容;
本質: url請求地址與服務器資源之間的對應關係;

2.2 SPA(single page application):

後端渲染(存在性能問題);
Ajax前端渲染(前端渲染提高性能, 但是不支持瀏覽器的前進和後退操作);
SPA: 單頁渲染程序: 整個網站只有一個頁面, 內容的變化通過Ajax局部更新實現, 同事支持瀏覽器地址欄的前進和後退操作;
SPA實現原理: 基於url地址的hash(hash的變化會導致瀏覽器記錄訪問歷史的變化, 但是hash的變化不會觸發新的url請求);
在實現SPA過程中, 最核心的技術點就是前端路由;

3. 前端路由:

3.1 概念與本質:

概念: 根據不同的用戶事件, 顯示不同的頁面內容;
本質: 用戶事件與事件處理函數之間的對應關係;

二、vue-router的基本使用：

1. vue-router介紹：

vue-router(官網: https://router.vuejs.org/zh/)是vue.js官方的路由管理器;
他和vue.js的核心深度集成, 可以方便的用於SPA應用程序的開發;

2.vue router包含的功能有:

支持HTML5歷史模式或hash模式;
支持嵌套路由;
支持路由參數;
支持編程式參數;
支持命名路由;

3. 基本使用:

3.1 步驟:

引入相關的庫文件;
添加路由鏈接;
添加路由填充位;
定義路由組件;
配置路由規則並創建路由實例;
把路由掛載到Vue根實例中;

3.2 引入相關的庫文件:

<!-- 導入vue文件, 爲全局window對象掛載Vue構造函數 -->
<script src="../vue.js"></script>

<!-- 導入vue-router文件, 爲全局windows對象掛載VueRouter構造函數 -->
<script src="../vue-router.js"></script>

3.3 添加路由鏈接:

router-link 是vue中提供的標籤, 默認會被渲染成a標籤;
to 屬性默認會被渲染成href屬性;
to屬性的值會被渲染爲#開頭的hash地址;

<div id="app">
   <router-link to="/user">User</router-link>
   <router-link to="/register">Register</router-link>
</div>

3.4 添加路由填充位:

路由填充位, 也叫"路由佔位符";
將來通過路由規則匹配到的組件, 將會被渲染到router-view所在的位置;

<router-view></router-view>

3.5 定義路由組件:

const user_com = {
   template: `
        <h1>User組件</h1>
    `
};
const register_com = {
    template: `
        <h1>Register組件</h1>
    `
};

3.6 配置路由規則並創建路由實例:

// 創建路由實例對象
var router = new VueRouter({
    // routes是路由規則數組
    routes: [
        // 每個路由規則都是一個配置對象, 其中至少包含path和component兩個屬性
        // path 表示當前路由規則匹配的hash地址
        // component 表示當前路由規則對應展示的組件
        (path: '/user', component: user_com),
        (path: '/register', component:register_com),
    ],
});

3.7 把路由掛載到Vue根實例中:

var vm = new Vue({
   el: "#app",
    data: {

    },
    // 掛載路由對象
    // router: router
    // es6中屬性名和掛載對象名相同時,可省略寫
    router,
});

3.8 完整代碼及效果

<html lang="en">
<head>
    <title>vue router的基本使用步驟</title>
    <!-- 導入vue文件, 爲全局window對象掛載Vue構造函數 -->
    <script src="../vue.js"></script>
    <!-- 導入vue-router文件, 爲全局windows對象掛載VueRouter構造函數 -->
    <script src="../vue-router.js"></script>
</head>
<body>
    <div id="app">
        <router-link to="/user">User</router-link>
        <router-link to="/register">Register</router-link>

        <router-view></router-view>
    </div>
    <script>
        const user_com = {
            template: '<h1>User組件</h1>'
            
        };
        const register_com = {
            template: `
                <h1>Register組件</h1>
            `
        };
        // 創建路由實例對象
        var router = new VueRouter({
            // routes是路由規則數組
            routes: [
                // 每個路由規則都是一個配置對象, 其中至少包含path和component兩個屬性
                // path 表示當前路由規則匹配的hash地址
                // component 表示當前路由規則對應展示的組件
                {path: '/user', component: user_com},
                {path: '/register', component:register_com},
            ],
        });
        var vm = new Vue({
            el: "#app",
            data: {

            },
            // 掛載路由對象
            router: router,
            // es6中屬性名和掛載對象名相同時,可省略寫
            // router,
        });
    </script>
</body>

4. 路由重定向:

路由重定向指的是: 用戶在訪問地址A的時候, 強制用戶跳轉到地址C, 從而展示特定的組件頁面;
通過路由規則的redirect 屬性, 指定一個新的路由地址, 可以很方便的設置路由的重定向:

var router = new VueRouter({
   // routes是路由規則數組
    routes: [
        // 其中, path表示需要被重定向的原地址, redirect表示將要重定向到的新地址
        {path: '/', redirect: '/user'},
        {path: '/user', component: user_com},
        {path: '/register', component:register_com},
    ],
});

三、vue-router嵌套路由：

1. 嵌套路由功能分析:

點擊父級路由鏈接顯示模板內容;
模板內容中又有子級路由鏈接;
點擊子級路由鏈接顯示自己子級模板內容

2. 父級路由組件模板"

父級路由鏈接;
父組件路由填充;

<div id="app">
    <p>
        <router-link to="/user">User</router-link>
        <router-link to="/register">Register</router-link>
    </p>
    <div>
        <router-view></router-view>
    </div>
</div>

3. 子路由模板:

子級路由鏈接;
子級路由填充位

const register_com = {
    template: `
    <div>
        <h1>Register組件</h1>
        <hr>
        <router-link to="/register/tab1">Tab1</router-link>
        <router-link to="/register/tab2">Tab2</router-link>
        
        <router-view></router-view>
    </div>
    `
};

4. 註冊路由與子路由:

 const register_tab1 = {
    template: '<h1>register_tab1組件</h1>'
    
};
const uregister_tab2 = {
    template: '<h1>register_tab2組件</h1>'
    
};
// 創建路由實例對象
var router = new VueRouter({
    // routes是路由規則數組
    routes: [
        // 其中, path表示需要被重定向的原地址, redirect表示將要重定向到的新地址
        {path: '/', redirect: '/user'},
        {path: '/user', component: user_com},
        {
            path: '/register', 
            component:register_com,
            children: [
                {path: '/register/tab1', component: register_tab1},
                {path: '/register/tab2', component: uregister_tab2},
            ]
        },
    ],
});

5. 完整代碼與效果:

<head>
    <title>vue router的路由嵌套</title>
    <script src="../vue.js"></script>
    <script src="../vue-router.js"></script>
</head>
<body>
    <div id="app">
        <p>
            <router-link to="/user">User</router-link>
            <router-link to="/register">Register</router-link>
        </p>
        <div>
            <router-view></router-view>
        </div>
        
    </div>
    <script>
        const user_com = {
            template: '<h1>User組件</h1>'
            
        };
        const register_com = {
            template: `
            <div>
                <h1>Register組件</h1>
                <hr>
                <router-link to="/register/tab1">Tab1</router-link>
                <router-link to="/register/tab2">Tab2</router-link>
                
                <router-view></router-view>
            </div>
            `
        };
        const register_tab1 = {
            template: '<h1>register_tab1組件</h1>'
            
        };
        const uregister_tab2 = {
            template: '<h1>register_tab2組件</h1>'
            
        };
        // 創建路由實例對象
        var router = new VueRouter({
            // routes是路由規則數組
            routes: [
                // 其中, path表示需要被重定向的原地址, redirect表示將要重定向到的新地址
                {path: '/', redirect: '/user'},
                {path: '/user', component: user_com},
                {
                    path: '/register', 
                    component:register_com,
                    children: [
                        {path: '/register/tab1', component: register_tab1},
                        {path: '/register/tab2', component: uregister_tab2},
                    ]
                },
            ],
        });
        var vm = new Vue({
            el: "#app",
            data: {
            },
            // 掛載路由對象
            router: router,
        });
    </script>
</body>

四、vue-router動態路由匹配：

1. 動態路由匹配基本用法:

<head>
    <title>動態路由匹配</title>
    <script src="../vue.js"></script>
    <script src="../vue-router.js"></script>
</head>
<body>
    <div id="app">
        <router-link to="/user/1">User1</router-link>
        <router-link to="/user/2">User2</router-link>
        <router-link to="/user/3">User3</router-link>

        <router-view></router-view>
    </div>
    <script>
        const user_com = {
            // 路由組件通過$route.params獲取路由參數
            template: '<h1>User {{ $route.params.id }}組件</h1>'
            
        };
        var router = new VueRouter({
            routes: [
                // 動態參數, 以冒號開頭
                {path: '/user/:id', component: user_com},
            ],
        });
        var vm = new Vue({
            el: "#app",
            data: {
            },
            router: router,
        });
    </script>
</body>

2. 路由組件傳參:

2.1 props路徑傳參:

$route與對應路由形成高度耦合, 不夠靈活, 所以可以使用props將組件和路由解耦

const user_com = {
   // 使用props接收路由參數
    props: ["id"],
    template: '< h1>User {{ id }}組件</h1>'
};
var router = new VueRouter({
    routes: [
        // 動態參數, 以冒號開頭
        {
            path: '/user/:id', 
            component: user_com,
            // 如果props被設置爲true, route.params將會被設置爲組件屬性
            props: true,    
        },
    ],
});

2.2 props對象傳參:

注意: 此時路徑傳參的id無效了!!!

 const user_com = {
    // 使用props接收路由參數
    props: ["id", "name", "age"],
    template: `
    <div>
        <h1>User {{ id }}組件</h1>
        <h2>{{name}} ======= {{age}}</h2>
    </div>`
    
};
var router = new VueRouter({
    routes: [
        {
            path: '/user/:id', 
            component: user_com,
            props: {
                name: "張三",
                age: 18
            },    
        },
    ],
});

2.3 props的值爲函數類型:

const user_com = {
 // 使用props接收路由參數
    props: ["id", "name", "age"],
    template: `
    <div>
        <h1>User {{ id }}組件</h1>
        <h2>{{name}} ======= {{age}}</h2>
    </div>`
    
};
var router = new VueRouter({
   routes: [
        {
            path: '/user/:id', 
            component: user_com,
            // 給props定義一個箭頭函數
            props: route => ({
                name: "張三",
                age: 18,
                // 獲取id值
                id: route.params.id
            })
        },
    ],
});

五、vue-router命名路由:

1. 命名路由的配置規則:

爲了方便的表示路由的路徑, 可以給路由規則起一個別名, 即爲"命名路由";

var router = new VueRouter({
  routes: [
        {
            path: '/user/:id', 
            component: user_com,
            // 命名路由
            name: 'user',
            props: true,    
        },
    ],
});

<router-link :to="{name: 'user', params: {id: 123}}">User3</router-link>

router.push({
 name: 'user',
    params: {
        id: 123
    },
});

六、vue-router編程式導航：

1. 頁面導航的兩種方式:

聲明式導航: 通過點擊鏈接實現導航的方式, 叫做聲明式導航;
編程式導航: 通過調用JavaScript形式的API實現導航的方式, 叫做編程式導航;
- 例如: 普通網頁中的location.href

2. 編程式導航基本用法:

常用的編程式導航API如下:

this.$router.push(‘hash地址’)
this.$router.go(n)

<head>
    <title>編程式導航</title>
    <script src="../vue.js"></script>
    <script src="../vue-router.js"></script>
</head>
<body>
    <div id="app">
        <router-link to="/user/1">User1</router-link>
        <button @click="jump">跳轉Register</button>
        <button @click="goBack">後退</button>
        <router-view></router-view>
    </div>
    <script>
        const user_com = {
            // 使用props接收路由參數
            props: ["id"],
            template: '<h1>User {{ id }}組件</h1>'
            
        };
        const register_com = {
            template: `
            <div>
                <h1>Register組件</h1>
            </div>
            `
        };
        var router = new VueRouter({
            routes: [
                {
                    path: '/user/:id', 
                    component: user_com,
                    // 命名路由
                    name: 'user',
                    props: true,    
                },
                {
                    path: '/register', 
                    component: register_com,
                    // 命名路由
                    name: 'register',
                }
            ],
        });
        var vm = new Vue({
            el: "#app",
            data: {
            },
            router: router,
            methods: {
                jump: function() {
                    this.$router.push({
                    name: 'register',
                });
                },
                goBack: function() {
                    this.$router.go(-1);
                },
            },
        });
    </script>
</body>

3. router.push()方法的參數規則:

// 字符串(路徑名稱)
router.push('/home')

// 對象
router.push({path: '/home'})

// 命名的路由(傳遞參數)
router.push({name: 'user', params: {id: 123}})

// 帶查詢參數, 變成/user?name=zhangsan
router.push({path: '/user', query: {name: 'zhangsan'}})

前端學習之VUE基礎五(Vue-Router)：路由的基本概念、vue-router的基本使用、vue-router嵌套路由、vue-router動態路由匹配、vue-router編程式導航