vue-router 是 vue 中需要學習的一個重要部分, 下面我來與大家分享下自己的經驗

想了解更多元件的知識請看

以 餓了麼APP 為例
底部是我用 mint-ui 做成的公共元件, 取名為 “BottomTab”

首先我們來配置下公共元件 BottomTab, 程式碼如下 (mint-ui 引入需要單獨配置, 這裡不做詳述)

<template>
    <mt-tabbar v-model="currentId" fixed>
        <mt-tab-item id="home">
            <!-- <img slot="icon" :src="[currentId == 'home' ? require('') : require('')]"> -->
 

            <img slot="icon" :src="currentId == 'home'">
            首頁
        </mt-tab-item>
        <mt-tab-item id="discover">
            <!-- <img slot="icon" :src="[currentId == 'discover' ? require('') : require('')]"> -->
            <img slot="icon" :src="currentId == 'discover'"
 
>
            發現
        </mt-tab-item>
        <mt-tab-item id="order">
            <!-- <img slot="icon" :src="[currentId == 'order' ? require('') : require('')]"> -->
            <img slot="icon" :src="currentId == 'order'">
            訂單
        </mt-tab-item>
 

        <mt-tab-item id="profile">
            <!-- <img slot="icon" :src="[currentId == 'profile' ? require('') : require('')]"> -->
            <img slot="icon" :src="currentId == 'profile'">
            我的
        </mt-tab-item>
    </mt-tabbar>
</template>

<script>
export default {
    name: "BottomTab",
    data() {
        return {
            currentId: "home"
        }
    },
    watch: {
        // 實現路由跳轉
        currentId: function(val, oldVal) {
            this.$router.push("/" + val);
        }
    }
};
</script>

建立完元件之後, 接下來就是要將它引入到相應的頁面中了
首先建立一個檔案 main.vue 做為所有頁面的主路由, 各個頁面的公共模組都放在這個檔案裡面
然後將底部的公共元件引用到這個資料夾內, 元件首字母建議大寫, 程式碼如下

<template>
    <div>
        <!-- 3. 在 template 中就可以直接使用了 -->
        <BottomTab></BottomTab>
    </div>
</template>

<script>
    // 1. 使用 import 匯入想要引用的的子元件, 這裡採用的是絕對路徑
    import BottomTab from '@/components/common/BottomTab'

    export default {
        name: 'mainContent',
        components: {
            // 2. 在 components 中寫入子元件
            BottomTab
        },
</script>

想實現路由之間相互跳轉的話, 必須得先配置 router/index.js 檔案
mainContent 為主路由; home discover order profile 為子路由, 對應跳轉的四個頁面, 程式碼如下

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

// 主路由
const MainContent = resolve => require.ensure([], () => resolve(require('@/views/main.vue')), 'MainContent');

// 首頁
const Home = resolve => require.ensure([], () => resolve(require('@/views/home/Home.vue')), 'Home'); // 首頁

// 發現
const Discover = resolve => require.ensure([], () => resolve(require('@/views/discover/Discover.vue')), 'Discover'); // 發現

// 訂單
const Order = resolve => require.ensure([], () => resolve(require('@/views/order/Order.vue')), 'Order'); // 訂單

// 我的
const Profile = resolve => require.ensure([], () => resolve(require('@/views/profile/Profile.vue')), 'Profile'); // 我的

Vue.use(Router)

export default new Router({
    routes: [
        {
            path: '/',
            redirect: '/home' // 預設路徑
        }, {
            //主路由
            path: '/main',
            name: 'mainContent',
            component: MainContent,
            children: [
                { 
                    // 首頁
                    path: '/home',
                    name: 'home',
                    component: Home
                }, { 
                    // 發現
                    path: '/discover',
                    name: 'discover',
                    component: Discover
                }, { 
                    // 訂單
                    path: '/order',
                    name: 'order',
                    component: Order
                }, { 
                    // 我的
                    path: '/profile',
                    name: 'profile',
                    component: Profile
                },
            ]
        },
    ]
})

• router-view
  
  • 主要是構建 SPA (單頁應用) 時，方便渲染你指定路由對應的元件。你可以 router-view 當做是一個容器，它渲染的元件是你使用 vue-router 指定的

路由配置完成後, 就要使用 router-view 進行渲染了 (只要有子路由, 就要用它來渲染)
進入前面建立好的檔案 main.vue內, 程式碼如下

<template>
    <div>
        <BottomTab></BottomTab>
        <div class="main-content">
            <router-view></router-view>
        </div>
    </div>
</template>

然後進入頁面看一下效果, 是否配置成功