vue-router的使用

Simple_IDE發表於2020-10-27

vue-router的使用


路由,其實就是指向的意思,當我點選頁面上的home按鈕時,頁面中就要顯示home的內容,如果點選頁面上的about 按鈕,頁面中就要顯示about 的內容。Home按鈕 => home 內容, about按鈕 => about 內容,也可以說是一種對映. 所以在頁面上有兩個部分,一個是點選部分,一個是點選之後,顯示內容的部分。

點選之後,怎麼做到正確的對應,比如,我點選home 按鈕,頁面中怎麼就正好能顯示home的內容。這就要在js 檔案中配置路由。

路由中有三個基本的概念 route, routes, router。

1, route,它是一條路由,由這個英文單詞也可以看出來,它是單數, Home按鈕 => home內容, 這是一條route, about按鈕 => about 內容, 這是另一條路由。

2, routes 是一組路由,把上面的每一條路由組合起來,形成一個陣列。[{home 按鈕 =>home內容 }, { about按鈕 => about 內容}]

3, router 是一個機制,相當於一個管理者,它來管理路由。因為routes 只是定義了一組路由,它放在哪裡是靜止的,當真正來了請求,怎麼辦? 就是當使用者點選home 按鈕的時候,怎麼辦?這時router 就起作用了,它到routes 中去查詢,去找到對應的 home 內容,所以頁面中就顯示了 home 內容。

4,客戶端中的路由,實際上就是dom 元素的顯示和隱藏。當頁面中顯示home 內容的時候,about 中的內容全部隱藏,反之也是一樣。客戶端路由有兩種實現方式:基於hash 和基於html5 history api.

1, 在src 目錄下新建兩個元件,home.vue 和 about.vue

<template>
    <div>
        <h1>home</h1>
        <p>{{msg}}</p>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                msg: "我是home 元件"
            }
        }
    }
</script>
<template>
    <div>
        <h1>about</h1>
        <p>{{aboutMsg}}</p>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                aboutMsg: '我是about元件'
            }
        }
    }
</script>

2, 在 App.vue中 定義 和

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <header>
    <!-- router-link 定義點選後導航到哪個路徑下 -->
      <router-link to="/home">Home</router-link>
      <router-link to="/about">About</router-link>
    </header>
    <!-- 對應的元件內容渲染到router-view中 -->
    <router-view></router-view>   
  </div>
</template>

<script>
export default {
  
}
</script>

3, 在 src目錄下再新建一個router.js 定義router, 就是定義 路徑到 元件的 對映。

import Vue from "vue";
import VueRouter from "vue-router";

// 引入元件
import home from "./home.vue";
import about from "./about.vue";

// 要告訴 vue 使用 vueRouter
Vue.use(VueRouter);

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

var router =  new VueRouter({
    routes
})
export default router;

4, 把路由注入到根例項中,啟動路由。這裡其實還有一種方法,就像vuex store 注入到根例項中一樣,我們也可以把vueRouter 直接注入到根例項中。在main.js中引入路由,注入到根例項中。

import Vue from 'vue'
import App from './App.vue'

// 引入路由
import router from "./router.js"    // import router 的router 一定要小寫, 不要寫成Router, 否則報 can't match的報錯
new Vue({
  el: '#app',
  router,  // 注入到根例項中
  render: h => h(App)
})

5, 這時點選頁面上的home 和about 可以看到元件來回切換。但是有一個問題,當首次進入頁面的時候,頁面中並沒有顯示任何內容。這是因為首次進入頁面時,它的路徑是 ‘/’,我們並沒有給這個路徑做相應的配置。一般,頁面一載入進來都會顯示home頁面,我們也要把這個路徑指向home元件。但是如果我們寫{ path: ‘/’, component: Home },vue 會報錯,因為兩條路徑卻指向同一個方向。這怎麼辦?這需要重定向,所謂重定向,就是重新給它指定一個方向,它本來是訪問 / 路徑,我們重新指向‘/home’, 它就相當於訪問 ‘/home’, 相應地, home元件就會顯示到頁面上。vueRouter中用 redirect 來定義重定向。

const routes = [
    {
        path:"/home",
        component: home
    },
    {
        path: "/about",
        component: about
    },
    // 重定向
    {
        path: '/', 
        redirect: '/home' 
    }
]

相關文章