iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 13
1
Modern Web

到底要怎麼開始開發網站? --- 從入門到使用Vue, Firebase製作老闆交代的網站系列 第 13

【D13 - 用Vue實作網頁】Routing 帶你到世界翱翔

今天要講的東西非常的實用,曾經我還是開發小盟新時去找了一個實習,結果他問我~ 你知道router是甚麼嗎....
我竟然跟他說: 「知道! 是路由器~」
雖然router真的是基地台,但他想問的是網頁的routing...

前言

在講到routing 之前要先帶各位看一下網址這個東西,如果你有印象的話~網址通常都是這個格式:

https://ithelp.ithome.com.tw/

而今天假設我要點進去文章的頁面~ 那網址就會變這樣

https://ithelp.ithome.com.tw/articles/

基本上就是多一個 articles在後面~ 所以網站上面要呈現甚麼頁面都是由網址來定義的,納今天我們也可以定義網址,告訴網頁說ㄟ我今天後面如果加了一個 articles就是要你前往articles的頁面喔~


先來看基本routing

最基本的routing就是直接在 main.js裡面定義一個variable 叫做 routes

const Home = { template: '<h1>home page</h1>' }
const Intro = { template: '<p>Intro page</p>' }

const routes = {
  '/': Home,
  '/intro': Intro
}

new Vue({
  el: '#app',
  data: {
    currentRoute: window.location.pathname
  },
  computed: {
    ViewComponent () {
      return routes[this.currentRoute]
    }
  },
  render (h) { return h(this.ViewComponent) }
})

我們可以看到我們在routes裡面定義的

  1. '/' => 就是當今天一點進網頁的home page
  2. '/about' 當我們今天網址後面多了一個**/about**時要導到 About這個頁面

再來看看進階用法

其實也部是進階用法~ 只是說我們可以用一個 JavaCeript來去定義所有的 route,而我們的project就會使用這個辦法,所以來帶各位實做一次

1. Routes.js

首先~ 我們先來創一個 routes.js,他會在src folder裡面,跟main.js在同一位置~
https://ithelp.ithome.com.tw/upload/images/20200913/2012973021XpJCnYdl.jpg

好接下來就先不要管它了~XDXD

2. Import vue-router~

我們接下來進去main.js 去告訴這個project說今天我們有把 Router放在 routes.js這個檔案裏面~

但在那之前我們要先import Vue Router,之後再來引進自己剛剛開的 routes.js

import VueRouter from "vue-router";
import Routes from './routes';

然後記的要 Use一下你import進來的東西~

Vue.use(VueRouter);

3. History Mode

這個東西就是看你自己想不想要用的了~ 因為他最主要是可以讓你的網址變得更美觀

假設今天你沒有用history mode那網址會變成這個樣子:

http://localhost:8080/#/Intro

沒錯~ 就會多一個 # hash,這個東西是拿來模擬一個真正的URL,這樣頁面就不會在url更動的時候reload~ 但是我們今天可以在main.js *(就是剛剛 Vue.use()底下)*寫一串code:

const router = new VueRouter({
  routes: Routes,
  mode: "history",
});

這樣我們的網址就會沒有#了~看起來漂亮多了lol
所以目前我們的main.js應該會長這樣:

import Vue from 'vue';
import App from './App.vue';
import { BootstrapVue, IconsPlugin } from "bootstrap-vue";
import VueRouter from "vue-router";

import Routes from './routes';

Vue.use(BootstrapVue);
Vue.use(IconsPlugin);
Vue.use(VueRouter);

import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css";
Vue.config.productionTip = false


const router = new VueRouter({
  routes: Routes,
  mode: "history",
});

new Vue({
  render: h => h(App),
  router: router,
}).$mount('#app')

定義一下 routes.js

如果你有照這之前做的那個 home.vue的話 (https://ithelp.ithome.com.tw/articles/10235691) 那你應該會有一個home.vue在你的components裡面~ 那接下來我們就要告訴routes.js 說: 今天一進去網頁('/')就要出現 home page~

import homePage from './components/Home.vue';

export default [
  { path: "/", component: homePage },
];

記得一樣要先import這個Home.vue先~ 之後才可以在底下用到他喔~

後記

今天原本想要帶到navigation bar 的~ 但是沒關係,感覺今天的東西已經夠多,需要時間消化了~ 況且今天是Sunday,把握青春去玩吧各位XDXD

對了~ 如果你npm run serve出來之後她顯示error~ 說找不到vue-router,那不用緊張,打開你的terminal然後下載
npm install vue-router 就可以囉~


上一篇
【D12 - 用Vue實作網頁】父子同心齊力斷金!
下一篇
【D14 - Vue也有生命!?】Vue 的 life-cycle
系列文
到底要怎麼開始開發網站? --- 從入門到使用Vue, Firebase製作老闆交代的網站30

尚未有邦友留言

立即登入留言