iT邦幫忙

第 11 屆 iThome 鐵人賽

0
自我挑戰組

新手初探 Vue系列 第 29

鐵人賽Day30 - Vue Router 及配置路由文件

  • 分享至 

  • xImage
  •  

首先我們要先安裝 Vue Router
Vue Router 安裝參考資訊
先在終端機輸入 $npm install vue-router --save
接著我們就要來配置 vue router 的文件
src 資料夾底下的 main.js 為我們的進入點及 Entry
至於 Router 配置路徑則是 router/index.js

首先我們先在 src 資料夾底下新增一個 router 資料夾,在裡面新增一個 index.js 檔案
接著按照官方的安裝資訊,我們在 index.js 檔案內 import 檔案,再把 components 內的 HelloWorld 當成自訂義的元件也給 import 進去:

import Vue from 'vue';
import VueRouter from 'vue-router';
// 官方的元件

import Home from '@/components/HelloWorld'
// 自訂的分頁元件

Vue.use(VueRouter);

export default new VueRouter({

});
//把這些資料統整到 main.js 使用

接著到我們的 Entrymain.js,我們要把剛剛的 router 給匯入:

import router from './router';

接著我們就可以到 index.js 來定義我們的 router 路徑:

export default new VueRouter({
    routes: [
        {
            name: '首頁',    // 元件呈現的名稱
            path: '/',    // 對應的虛擬路徑
            component: Home, // 對應的元件
        }
    ]
});

再來回到 App.vue,把 <HelloWorld> 註解掉,接著新增 <router-view></router-view>
把它運行起來,就會發現路徑多了 # 就是路由配置好了


上一篇
鐵人賽Day29 - Vue 插曲之 Git 基本指令
下一篇
鐵人賽Day31 - 新增路由路徑及連結
系列文
新手初探 Vue30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言