vue中的路由router詳解

路由（router）

1. 後端路由：所有的超鏈接都是URL地址，所有的URL地址都定義服務器上對應的資源
2. 前端路由：對於單頁面應用程序來說，通過URL中的hash值（#號）來實現不同頁面之前的切換

hash有一個特點：http請求中不會包含hash相關的內容，所以，單頁面應用程序中的頁面跳轉主要是用hash實現

路由的基本使用

1. 引入文件（vue.js和vue-router.js）
2. 創建路由對象，路由對象中有routes（配置對象），配置對象中有兩個屬性path（監聽路由的鏈接地址）和component（對應的組件對象）
3. 掛載到Vue實例中
4. 使用<router-view>標籤展示
5. 使用<router-link to="跳轉的地址">標籤用於超鏈接的跳轉
6. 默認渲染爲<a>標籤，通過tag屬性可以改變標籤，依然保持點擊跳轉事件
7. 在router-link標籤中添加 replace 屬性 則 無歷史回退記錄

<div class="app">
    <!--vue-router提供了<router-link to='/跳轉的地址'>標籤用於超鏈接的跳轉，可以省略#號,
    默認渲染爲<a>標籤，通過tag屬性可以改變標籤，依然保持點擊跳轉事件-->
    <router-link to="/login" tag="span" >登錄</router-link>
    <router-link to="/register">註冊</router-link>

    <!--4.使用：通過Vue-router提供的router-view標籤-->
        <router-view></router-view>

</div>
<script src="../lib/vue-2.4.0.js"></script>
<!--1. 引入Vue-router文件-->
<script src="../lib/vue-router-3.0.1.js"></script>
<script>

    //組件對象
    var login = {
        template: '<h1>登錄頁面</h1>'
    }
    var register = {
        template: '<h1>註冊頁面</h1>'
    }

    /* 2. 創建路由對象，路由對象中有一個routes（配置對象）屬性是一個數組，
     配置對象中有兩個屬性path（監聽路由鏈接地址）和component（對應的組件對象）*/
    var routerObj = new VueRouter({
        routes: [
            {path: '/', redirect: '/login'},    /*重定向*/
            {path: '/login', component: login},
            {path: '/register', component: register}
        ]
    });

    var vm = new Vue({
        el: '.app',
        data: {},
        methods: {},
        /*3. 掛載到Vue實例中的router屬性*/
        router: routerObj
    })
</script>

---

選中 高亮顯示

方式①：通過<router-link>所提供的類=>router-link-active設置樣式

方式②：改變<router-link>所提供的類=>創建路由對象中，加入一個屬性（linkActiveClass）, linkActiveClass:'myactive' ,此時，對myactive類設置樣式

---

路由傳參

方式①：query 如果在路由中，使用查詢字符串，給路由傳遞參數，則不需要修改路由規則的path屬性

<router-link to="/login?id=11&name=zs"></router-link>

(this.$route.query): 通過this.$route.query.id拿到對應的id的值，通過this.$route.query.name拿到對應的name的值

 

 

方式②：params  

1. 改變路由規則path的屬性{path:/login/:id/:name等以此類推,component:login}
2. <router-link to='/login/12/zs等以此類推'></router-link>
3. (this.$route.params)  : 通過this.$route.params.id獲取對應的id的值。。。。

<div class="app">
    <!--通過改變路由規則的path屬性 和 對應的router-link to= ''的值實現傳參-->
    <router-link to="/login/10/lang">登錄</router-link>
    <router-link to="/register">註冊</router-link>
    <router-view></router-view>
</div>
<script src="../lib/vue-2.4.0.js"></script>
<script src="../lib/vue-router-3.0.1.js"></script>
<script>

    /*組件對象*/
    var login = {
        template:'<h1>登錄界面----{{ $route.params.id }}-------{{ $route.params.name }}</h1>',
        created(){
            /*通過this.$route.params獲取地址欄中的參數*/
            console.log(this.$route.params)
        }
    }
    var register = {
        template:'<h1>註冊界面</h1>'
    }

    /*創建路由對象*/
    var router = new VueRouter({
        routes:[
            {path:'/login/:id/:name',component:login},
            {path:'/register',component:register}
        ]
    })

  var vm = new Vue({
        el:'.app',
        data:{},
      /*掛載到Vue實例中（屬性和值相同可直接寫router）*/
      router
    })
</script>

---

路由的嵌套（子路由）

路由規則中新增一個children屬性，是一個數組，再次存放path和component

注意：children中的path的值不能帶‘ / ’,

<div id="app">
    <router-link to="/account">Account</router-link>
    <router-view></router-view>
</div>

<template id="tmpl">
    <div>
        <h1>這是 Account 組件</h1>
<!--Account的子組件--->
        <router-link to="/account/login">登錄</router-link>
        <router-link to="/account/register">註冊</router-link>
        <router-view></router-view>
    </div>
</template>

<script>

    // 組件的模板對象
    var account = {
        template: '#tmpl'
    }

    var login = {
        template: '<h3>登錄</h3>'
    }

    var register = {
        template: '<h3>註冊</h3>'
    }

    var router = new VueRouter({
        routes: [
            {
                path: '/account',
                component: account,
                // 使用 children 屬性，實現子路由，同時，子路由的 path 前面，不要帶 / ，否則永遠以根路徑開始請求，這樣不方便我們用戶去理解URL地址
                children: [
                    {path: 'login', component: login},
                    {path: 'register', component: register}
                ]
            }
        ]
    })

    // 創建 Vue 實例，得到 ViewModel
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
        router
    });
</script>

---

命名視圖實現佈局方式

通過路由規則的components屬性，是一個對象，值可以有多個組件對象

注意：是components，帶個s，是一個對象

{ path:"/" , components:{

    default：組件對象,       //默認的展示組件

    name的值：組件對象,

..........

}

通過name屬性指定對應的組件對象

<router-view name=" "></router-view>

    <style>
        *{
            padding:0;
            margin:0;
        }
        /*設置組件中的樣式*/
        .header {
            background-color: orange;
            height: 100px;
        }
        .container {
            display: flex;
            height:700px;
        }
        .left{
            flex: 2;
            background-color: red;
        }
        .main{
            background-color: green;
            flex:8;
        }
    </style>
<div class="app">
    <!--通過name指定components中對應的組件-->
    <router-view></router-view>
    <div class="container">
        <router-view name="left"></router-view>
        <router-view name="main"></router-view>
    </div>

</div>
<script>

    /*創建組件對象*/
    var header = {
        template: '<h1 class="header">頭部</h1>'
    }
    var leftBox = {
        template: '<h1 class="left">左側導航欄</h1>'
    }
    var mainBox = {
        template: '<h1 class="main">主體內容</h1>'
    }

    var router = new VueRouter({
        routes: [
            /*使用components是一個對象，定義多個展示router-view視圖,通過屬性名稱給router-view標籤元素指定name*/
            {
                path: '/', components: {
                default: header,
                left: leftBox,
                main: mainBox
            }
            }
        ]
    })

    var vm = new Vue({
        el: '.app',
        data: {},
        router
    })
</script>

---

keep-alive:保存組件狀態，失活的組件將會被緩存

當一個頁面離開，再回到這個頁面時，默認是不會保存之前頁面的狀態的

如果要保存這個數據 可使用<keep-alive>標籤包裹住<router-view>標籤

可見，當使用keep-alive標籤時，已經對組件狀態有所緩存，離開關於界面再次進入關於界面依然是展示西遊的信息。而不是三國

當且僅當使用keep-alive時會觸發兩個生命週期函數 activated（keep-alive被激活） 和 deactivated（keep-alive被停用）

 

keep-alive的屬性：

1. include - 字符串或正則表達式。只有名稱匹配的組件會被緩存
2. exclude - 字符串或正則表達式。任何名稱匹配的組件都不會被緩存。
3. max - 數字。最多可以緩存多少組件實例。

include 和 exclude :屬性允許組件有條件地緩存。二者都可以用逗號分隔字符串、正則表達式或一個數組來表示。

max:最多可以緩存多少組件實例。一旦這個數字達到了，在新實例被創建之前，已緩存組件中最久沒有被訪問的實例會被銷燬掉。

示例代碼：

app.vue

home.vue

 

about.vue

 

user.vue

示例效果：

可見，home主頁沒有被緩存下來

---