vue三十二：Vue-Router之一級路由配置

 

Vue-Router
Vue-Router是用來將一個Vue程序的多個頁面進行路由的。比如一個Vue程序（或者說一個網站）有登錄、注冊、首頁等模塊，那么我們就可以定義/login、/register、/來映射每個模塊。

安裝：
通過script加載進來：<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>。
通過npm安裝：npm install vue-router。
官方文檔：https://router.vuejs.org/zh/。
github地址：https://github.com/vuejs/vue-router。
安裝和使用說明：https://router.vuejs.org/zh/installation.html
下載地址：https://unpkg.com/vue-router@3.1.6/dist/vue-router.js

 

基本使用：
1. 創建一個`VueRouter`對象：`new VueRouter()`。
2. 在`VueRouter`中，需要傳遞一個`routes`參數。這個參數是一個數組類型，數組中存儲的是對象，對象中最少要有兩個屬性，一個是`path`，代表`url`，第二個是`component`，代表數據更新的組件。示例代碼如下：
```js
let router = new VueRouter({
　　routes: [
　　　　{path: "/",component: index},
　　　　{path: "/find",component: find},
　　　　{path: "/friend",component: friend}
　　]
})
```
3. 將`router`傳給`Vue`。
4. 把網頁中之前的`a`標簽，替換成`router-link`。
5. 使用`router-view`指定網頁中哪個地方要被更新。

 

准備3個組件

 

在src文件夾下，創建router.js，實例化Router並配置路由映射

 

在主入口main.js中注冊router

訪問路由，失敗

是因為只映射了要加載的組件，但是沒有指定加載位置，在根組件app中，預留路由容器：router-view

 

Film

<template>
    <div>
        film
    </div>
</template>

<script>
    export default {
        name: "Film"
    }
</script>

<style scoped>

</style>

Cinema

<template>
    <div>
        cinema
    </div>
</template>

<script>
    export default {
        name: "Cinema"
    }
</script>

<style scoped>

</style>

Center

<template>
    <div>
        center
    </div>
</template>

<script>
    export default {
        name: "Center"
    }
</script>

<style scoped>

</style>

router.js

import Vue from 'vue'
import Router from 'vue-router'

// 導入組件
import Film from "@/views/Film";  // 導入Film組件，@符號是指向src文件夾
import Cinema from "@/views/Cinema";
import Center from "@/views/Center";

Vue.use(Router)  // 注冊路由插件vue-router

// 實例化Router組件
const router = new Router({
    routes: [
        {path: '/film', component: Film},  // 訪問的前段資源是/film開頭的路徑，加載Film組件
        {path: '/cinema', component: Cinema},  // 訪問的前段資源是/cinema開頭的路徑，加載Cinema組件
        {path: '/center', component: Center}  // 訪問的前段資源是/center開頭的路徑，加載Center組件
    ]
})
export default router  // 導出router實例

main.js

import Vue from 'vue'
import App from './App.vue'
import router from "./router";  // 導入router.js

Vue.config.productionTip = false

new Vue({
    // router: router,  // 注冊router,名字取為router，此時注冊名和實例名一致，可以直接寫一個router
    router,
    render: h => h(App),
}).$mount('#app')

app

<template>
    <div>
        hello vue

        <!-- 路由容器 -->
        <router-view></router-view>

    </div>
</template>

<script>

    export default {
        data() {
            return {}
        },
    }
</script>

<style lang="scss">

</style>