Vue.js 2.x筆記：路由Vue Router（6）

時間 2019-11-05

標籤 vue.js vue 2.x 筆記路由 router 欄目 JavaScript 简体版

原文原文鏈接

1. Vue Router簡介與安裝

1.1 Vue Router簡介

　　Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，構建單頁面應用。html

　　Vue Router支持3種路由模式：前端

　　　　◊ hash：使用URL hash值做爲路由，HTML5 History API出現以前，前端路由都經過hash來實現。hash實現須要在URL中加上#，Web服務不會解析hash，自動忽略#後面的內容，JavaScript經過window.location.hash讀取解析。vue

　　　　◊ history：依賴HTML5 History API和服務器配置node

　　　　◊ abstract：支持全部JavaScript運行環境，如node服務器端。若是發現沒有瀏覽器的API，路由就會強制進入該模式。webpack

　　vue-router提供兩個指令標籤組件來處理這個導航與自動渲染邏輯：git

　　　　◊ <router-view>：渲染路徑匹配到的組件視圖github

　　　　◊ <router-link>：支持用戶在具備路由功能的應用中導航web

1.2 Vue Router安裝

　　Vue Router官方網址：https://github.com/vuejs/vue-routervue-router

　　Vue Router文檔教程：https://router.vuejs.org/zh/vue-cli

　　npm安裝VueRouter：

npm install vue-router

2. 起步示例

2.1 單個html頁面中使用

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>libing.vue</title>
    <script src="node_modules/vue/dist/vue.min.js"></script>
    <script src="node_modules/vue-router/dist/vue-router.min.js"></script>
</head>

<body>
    <div id="app">
        <ul>
            <li>
                <router-link to="/home">Home</router-link>
            </li>
            <li>
                <router-link to="/about">About</router-link>
            </li>
        </ul>
        <router-view></router-view>
    </div>

    <template id="home">
        <div>Home</div>
    </template>
    <template id="about">
        <div>About</div>
    </template>

    <script>
        var home = Vue.extend({
            template: "#home"
        });
        var about = Vue.extend({
            template: "#about"
        });

        const routes = [{
                path: '/home',
                component: home
            },{
                path: '/about',
                component: about
            }
        ];

        const router = new VueRouter({
            routes: routes
        });

        const app = new Vue({
            router
        }).$mount('#app');
    </script>
</body>

</html>

Index.html

2.2 vue-cli中模塊化使用

　　（1）建立基於vue-cli項目

$ vue init webpack libing.vue

　　（2）/src/views中新建Home.vue及About.vue

<template>
    <div>{{ title }}</div>
</template>

<script>
export default {
    data: function() {
        return {
            title: "主頁"
        };
    }
};
</script>

Home.vue

<template>
    <div>{{ title }}</div>
</template>

<script>
export default {
    data: function() {
        return {
            title: "關於"
        };
    }
};
</script>

About.vue

　　（3）/src/route/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/views/Home'
import About from '@/views/About'

Vue.use(Router)

export default new Router({
    routes: [{
            path: '/',
            name: 'home',
            component: Home
        },
        {
            path: '/home',
            name: 'home',
            component: Home
        },
        {
            path: '/about',
            name: 'about',
            component: About
        }
    ]
})

　　（4）/src/App.vue

<template>
    <div id="app">
        <ul>
            <li>
                <router-link to="/home">Home</router-link>
            </li>
            <li>
                <router-link to="/about">About</router-link>
            </li>
        </ul>
        <router-view/>
    </div>
</template>

<script>
export default {
    name: "App"
};
</script>

　　在router-link經過名稱引用路由：向to屬性傳入一個對象顯式的聲明路由的名稱。

<router-link :to="{ name: 'home' }">Home</router-link>

注：在/src/route/index.js中配置路由路徑時，建立Router 對象new Router({})，若是不配置 mode，就會使用默認的 hash 模式，該模式下會將路徑格式化爲 #! 開頭。

設置 mode: "history" 將使用 HTML5 history 模式，該模式下沒有 # 前綴，並且能夠使用 pushState 和 replaceState 來管理記錄。

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/views/Home'
import About from '@/views/About'

Vue.use(Router)

export default new Router({
    mode: 'history',
    routes: [{
            path: '/',
            name: 'home',
            component: Home
        },
        {
            path: '/home',
            name: 'home',
            component: Home
        },
        {
            path: '/about',
            name: 'about',
            component: About
        }
    ]
})

3. 動態路由匹配

　　在 vue-router 的路由路徑中使用「動態路徑參數」(dynamic segment) ，動態部分以 : 開頭。

　　/src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/views/Home'
import About from '@/views/About'
import User from '@/views/User'

Vue.use(Router)

export default new Router({
    mode: 'history',
    routes: [{
            path: '/',
            component: Home
        },
        {
            path: '/home',
            component: Home
        },
        {
            path: '/about',
            component: About
        },
        {
            // 動態路徑參數 以冒號開頭
            path: '/user/:id',
            component: User
        }
    ]
})

　　User.vue：

<template>
    <div>User ID:{{ $route.params.id }}</div>
</template>

<script>
export default {
    
}
</script>

　　App.vue：

<template>
    <div id="app">
        <ul>
            <li>
                <router-link to="/home">Home</router-link>
            </li>
            <li>
                <router-link to="/about">About</router-link>
            </li>
            <li>
                <router-link to="/user/1">User ID:1</router-link>
            </li>
            <li>
                <router-link to="/user/2">User ID:2</router-link>
            </li>
        </ul>
        <router-view/>
    </div>
</template>

<script>
export default {
    name: "App"
};
</script>

　　在User.vue中直接經過 {{ $route.params.id }} 獲取路由中路徑參數值。

　　當整個vue-router 注入到根實例後，在組件的內部，能夠經過this.$route 來獲取到 router 實例。

　　$route中params 屬性來得到動態部分，params 屬性是一個對象。

　　屬性名是路徑中定義的動態部分 id, 屬性值是router-link中to 屬性中的動態部分。

　　在<router-link>中加入一個params的屬性來指定具體的參數值。

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

4. 嵌套路由

　　實際應用界面，一般由多層嵌套的組件組合而成。

　　vue-router配置嵌套路示例：

　　App.vue

<template>
    <div id="app">
        <ul>
            <li>
                <router-link to="/home">Home</router-link>
            </li>
            <li>
                <router-link :to="{ name: 'about' }">About</router-link>
            </li>
            <li>
                <router-link :to="{ name: 'user', params:{ id: 1 }}">UserID:1</router-link>
            </li>
            <li>
                <router-link to="/user/2">UserID:2</router-link>
            </li>
        </ul>
        <router-view/>
    </div>
</template>

<script>
export default {
    name: "App"
};
</script>

　　這裏的<router-view>是最頂層的出口，渲染最高級路由匹配到的組件。

　　一個被渲染組件一樣能夠包含本身的嵌套 <router-view>。

　　User.vue

<template>
    <div>
        <h2>User ID:{{ $route.params.id }}</h2>
        <router-view></router-view>
    </div>
</template>

<script>
export default {};
</script>

　　要在嵌套的出口中渲染組件，須要在 VueRouter 的參數中使用 children 配置：

　　index.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/views/Home'
import About from '@/views/About'
import User from '@/views/User'
import UserProfile from '@/views/UserProfile'

Vue.use(Router)

export default new Router({
    mode: 'history',
    routes: [{
            path: '/',
            name: 'home',
            component: Home
        },
        {
            path: '/home',
            name: 'home',
            component: Home
        },
        {
            path: '/about',
            name: 'about',
            component: About
        },
        {
            // 動態路徑參數 以冒號開頭
            path: '/user/:id',
            name: 'user',
            component: User,
            children: [{
                // 當 /user/:id/profile 匹配成功，
                // UserProfile 會被渲染在 User 的 <router-view> 中
                path: 'profile',
                name: 'profile',
                component: UserProfile
            }]
        }
    ]
})

　　UserProfile.vue

<template>
    <div>User Profile</div>
</template>

<script>
export default {};
</script>

　　訪問嵌套路由方式：http://localhost:8080/user/1/profile

　　在嵌套路由中訪問父級路由參數：

<template>
    <div>User Profile:{{ $route.params.id }}</div>
</template>

<script>
export default {};
</script>

　　當訪問 /user/1 時，提供一個空的子路由。

{
    // 動態路徑參數 以冒號開頭
    path: '/user/:id',
    name: 'user',
    component: User,
    children: [{
        // 當 /user/:id 匹配成功，
        // UserProfile 會被渲染在 User 的 <router-view> 中
        path: '',
        component: UserProfile
    }, {
        // 當 /user/:id/profile 匹配成功，
        // UserProfile 會被渲染在 User 的 <router-view> 中
        path: 'profile',
        name: 'profile',
        component: UserProfile
    }]
}

5. 命名視圖

　　若要同級展現多個視圖（非嵌套），使用命名視圖。

　　若是router-view沒有設置名字，則默認爲 default。

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

　　一個視圖使用一個組件渲染，所以對於同個路由，多個視圖就須要多個組件。使用 components 配置。

<router-view name="header"></router-view>
<router-view name="slidebar"></router-view>
<router-view name="main"></router-view>
<router-view name="footer"></router-view>

　　Route配置：

export default new Router({
    routes: [{
            path: '/',
            name: 'home',
            components: {
                default: Home,
                header: Header,
                slidebar: SlideBar,
                footer: Footer
            }
        }
    ]
})

　　命名嵌套視圖：

<template>
    <div>
        <h2>User ID:{{ $route.params.id }}</h2>
        <router-view></router-view>
        <router-view name="defined"></router-view>
    </div>
</template>

<script>
export default {};
</script>

export default new Router({
    routes: [{
            // 動態路徑參數 以冒號開頭
            path: '/user/:id',
            name: 'user',
            component: User,
            children: [{
                // 當 /user/:id 匹配成功，
                // UserProfile 會被渲染在 User 的 <router-view> 中
                path: '',
                component: UserProfile
            }, {
                // 當 /user/:id/profile 匹配成功，
                // UserProfile 會被渲染在 User 的 <router-view> 中
                path: 'profile',
                name: 'profile',
                components: {
                    default: UserProfile,
                    defined: UserDefinedProfile
                }
            }]
        }
    ]
})

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。