付費限定

[8] Vue Router

張哲嘉

2022/10/06閱讀時間約 2 分鐘

Basic config

最基本的寫法就是在 src/router/index.ts 的 routes 內設定像這樣

path 是設定路由，name 如果你沒有要用路由傳參，不寫也沒關係，component 是對應到哪個你寫的 vue 頁面

router-link

跟 <a></a> 很像，用法是像

<router-link to="/">Home</router-link>

設定 to="路由" 就可以在頁面上點這個連結進入想去的頁面

Nested Routes

以行動支持創作者！付費即可解鎖

本篇內容共 1062 字、0 則留言，僅發佈於Vue+Django+MongoDB+Nginx 從網頁全端開發到架站一次教給你你目前無法檢視以下內容，可能因為尚未登入，或沒有該房間的查看權限。

#網頁開發

張哲嘉的沙龍Vue+Django+MongoDB+Nginx 從網頁全端開發到架站一次教給你

張哲嘉的沙龍

9會員

49內容數

比起詳細教學單一技能，網路上或者市面上整合多項技能的教學相對少很多，但要真的完成一項專案往往不是只靠一項技能便能做到。而且教科書式的完整教學也比較枯燥乏味，因此我想以自身的經驗為例，以全端開發各項技能中最常用到的部分進行講解，讓讀者能夠快速上手掌握全端技能。

留言0

查看全部

發表第一個留言支持創作者！

張哲嘉的沙龍的其他內容

[7] Vue: Life cycle

今天來介紹 vue 的生命週期，什麼是生命週期呢？講簡單一點就是從你用瀏覽器打開網頁開始，到網頁內的元件一個一個生成，到整個完整的網頁建立的過程就叫生命週期，完整過程如下圖是不是眼花撩亂啊？讓我簡化一下，其實主要順序就是如下圖在加上 setup 語法糖的 script 標籤內做的事相當於在 be

#網頁

[6] Vue 指令

v-bind v-bind 可以讓 template 內的標籤去綁定 script 內定義的變數，舉個例子可以改寫成這樣最後效果是一樣的，在標籤內 v-bind 可以簡寫成 : v-model 上一篇已經提到了，就是可以透過網頁上的操作去改變資料的值，比方說表單、輸入欄等等。 v-for 迴圈，

#網頁開發

[5] 寫一個 Vue 頁面

定義路由首先先來定義路由，先把上一篇寫的 home.vue 定義在根路由。打開 src/router/index.ts，在 routes 內定義 path 定義 url，component 定義要指向哪個 vue 頁面，component:()=>import('@/components/hom

#網頁開發

[4] Vue 頁面結構

在寫頁面之前，先來介紹 Vue 頁面結構。首先先在 src/components 底下建立一個 home.vue 跟寫一個 html 頁面很像，一樣是分成寫網頁內容、script、style，三個部分，只是 html 標籤換成了 template。 template 就是相當於原生 html 檔

#網頁開發

[3] Vue 專案架構

專案建好了，那先來講 Vue 的專案架構詳細內容很多，所以我挑重點講 public index.html public/index.html 是 Vue 頁面的 entry point，進入一個 Vue 頁面會先進 public/index.html，再套用 App.vue，最後才是進入你寫的 .

#網頁開發

[2] Vue: getting started

前言 Vue 在過去的一兩年內快速發展，寫法也一直改變，我在過去一年多也更改了兩次寫法，在這個系列中我將以最新的 composition api + typescript 寫法進行教學。 javascript 有兩大痛點，一個是異步問題，另一個是弱型別。要渲染畫面一定要多線程同時異步處理，不然真的一

#網頁開發