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

libingql發表於2018-06-13

Vue.js筆記路由

1. Vue Router簡介與安裝

1.1 Vue Router簡介

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

　　Vue Router支援3種路由模式：

　　　　◊ hash：使用URL hash值作為路由

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

　　　　◊ abstract：支援所有JavaScript執行環境，如node伺服器端。如果發現沒有瀏覽器的API，路由就會強制進入該模式。

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

　　　　◊ <router-view>：渲染路徑匹配到的元件檢視

　　　　◊ <router-link>：支援使用者在具有路由功能的應用中導航

1.2 Vue Router安裝

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

　　Vue Router文件教程：https://router.vuejs.org/zh/

　　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>

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>

　　其餘未做改動部分：

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

/src/main.js

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>libing.vue</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

index.html

　　在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
                }
            }]
        }
    ]
})

vue筆記-6 vue中router路由路由引數的傳遞巢狀路由
2020-10-09
Vue筆記路由巢狀
Vue.js 2.x筆記：指令（4）
2018-06-11
Vue.js筆記
Vue.js 2.x筆記：元件（5）
2018-06-12
Vue.js筆記元件
Vue.js 2.x筆記：基本語法（2）
2018-06-08
Vue.js筆記
Vue.js 2.x筆記：狀態管理Vuex（7）
2018-06-25
Vue.js筆記
Vue.js 2.x筆記：安裝與起步（1）
2018-06-07
Vue.js筆記
Vue.js 2.x筆記：表單繫結（3）
2018-06-10
Vue.js筆記
Vue.js 2.x筆記：服務請求axios（8）
2018-06-27
Vue.js筆記iOS
vue 路由vue Router
2020-12-28
Vue路由
vue-router筆記
2021-09-09
Vue筆記
vue2.0學習筆記（八）：vue-router 路由配置（1）–基礎篇
2018-04-23
Vue筆記路由
Vue-Router學習筆記
2018-10-23
Vue筆記
vue.js 學習筆記
2019-08-05
Vue.js筆記
Vue.js小書筆記
2019-05-23
Vue.js筆記
vue-router 巢狀路由
2018-12-19
Vue巢狀路由
vue-router路由基礎
2019-04-28
Vue路由
邏輯Vue.js 路由
2020-11-12
Vue.js路由
vue全家桶 ---vue-router路由篇
2018-12-29
Vue路由
Vue-Router基礎學習筆記
2018-10-14
Vue筆記
一起學Vue：路由(vue-router)
2020-11-01
Vue路由
vue--vue-router 元件對映到路由
2022-02-28
Vue元件路由
vue-router 原始碼：路由模式
2018-08-15
Vue原始碼路由模式
vue-router 原始碼：前端路由
2018-06-27
Vue原始碼前端路由
vue學習筆記（七）---- vue中的路由
2020-10-27
Vue筆記路由
Vue.js中，如何自己維護路由跳轉記錄？
2019-05-19
Vue.js路由
Vue學習筆記（十一）：路由管理
2023-10-16
Vue筆記路由
Vue學習筆記之路由篇
2021-09-09
Vue筆記路由
vue router路由自定義後退事件
2018-12-10
Vue路由事件
vue router 引入多個路由檔案
2019-02-27
Vue路由
vue-router控制路由許可權
2018-07-30
Vue路由
3 vite vue-router 路由巢狀
2024-08-07
ViteVue路由巢狀
Vue Router 4與路由管理實戰
2024-06-07
Vue路由
vue-router路由之路-極簡教程
2022-12-15
Vue路由
開心檔之Vue.js 路由
2023-03-02
Vue.js路由
vue學習筆記6
2024-07-05
Vue筆記
VUE複習筆記30（vue-router詳解進階）
2018-09-13
Vue筆記
Vue.js 學習筆記之四：Vue 元件基礎
2020-10-12
Vue.js筆記元件
搭建Vue從Vue-cli到router路由護衛
2019-11-11
Vue路由