Vue - Router 安裝及基礎配置 | YuShu Hsiao - 點部落

2019-07-03 置頂文章

Vue - Router 安裝及基礎配置

2032
0
Vue
2019-07-04

1.安裝 vue-router

2.基礎Router 配置及說明

Vue Router 參考資訊

1.安裝 vue-router

npm 指令如下:

npm install vue-router --save

後面要記得加上 --save

2.基礎Router 配置及說明

在src的資料夾底下新增folder: router

然後新增index.js

在index.js裡面新增以下內容

自訂的分頁元件會跟下面要新增的routes 有關連性

然後在Entry:main.js裡面加入配置檔

把網站on起來之後會發現網址後面多了一個#，這就是虛擬的Router

回到 index.js底下開始定義路徑 routes ，

routes後面接的是一個物件陣列，定義方式如下

import Vue from 'vue'
import VueRouter from 'vue-router'
// 以上是官方的元件

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

Vue.use(VueRouter);
// 啟用

// 本文件需要匯出給Entry:main.js使用
export default new VueRouter({
    // 開始定義路徑，後面接物件陣列
    routes: [{
        name: '首頁', // 元件接下來會呈現的名稱
        path: '/', // 對應的虛擬路徑
        component: Home // 對應的元件，本文件上面自訂的分頁元件名稱
    }, ],
});

注意:名稱的對應(import 的Home 跟下面component 的 Home 需一致)