Basic config
最基本的寫法就是在 src/router/index.ts 的 routes 內設定像這樣
path 是設定路由，name 如果你沒有要用路由傳參，不寫也沒關係，component 是對應到哪個你寫的 vue 頁面
router-link
跟 <a></a> 很像，用法是像

學習

職場產業

創作

Basic config

router-link

Nested Routes

router view

pass parameter by url

useRoute

useRouter

404 page

<h2 class="draft-block draft--h2" name="header-anj5f">Basic config</h2>
<div class="draft-block draft--p left">最基本的寫法就是在 <span style="font-weight: bold; ">src/router/index.ts</span> 的 <span style="font-weight: bold; ">routes</span> 內設定像這樣</div>
<div class="embed-block-prerender" data-type="gist" data-id="189aa732c34f9d90debad57ce127b910"></div>
<div class="draft-block draft--p left"><span style="font-weight: bold; ">path</span> 是設定路由，<span style="font-weight: bold; ">name</span> 如果你沒有要用路由傳參，不寫也沒關係，<span style="font-weight: bold; ">component</span> 是對應到哪個你寫的 vue 頁面</div>
<h2 class="draft-block draft--h2" name="header-514nk">router-link</h2>
<div class="draft-block draft--p left">跟 <span style="font-weight: bold; ">&lt;a&gt;&lt;/a&gt;</span> 很像，用法是像</div>
<div class="draft-block draft--p left"><span style="font-weight: bold; ">&lt;router-link to="/"&gt;Home&lt;/router-link&gt;</span></div>
<div class="draft-block draft--p left">設定 <span style="font-weight: bold; ">to="路由"</span> 就可以在頁面上點這個連結進入想去的頁面</div>
<h2 class="draft-block draft--h2" name="header-bnqgr">Nested Routes</h2>

狀態管理有點像是 cookie 或 localStorage，可是又多了更多操作可以用，讓你再切換頁面時可以使用相同的變數。
用來使用這個功能的套件叫做 vuex 
以下不是狀態管理全部的功能，但是最常在用的其實就是這些
state
首先先來定義一個可以在各個網頁頁面取用的變數吧
所有的狀態管理設定

[9] State management

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

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

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

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

付費限定文章
[8] Vue Router

Basic config

router-link

Nested Routes

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

付費限定文章[8] Vue Router

Basic config

router-link

Nested Routes

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

付費限定文章
[8] Vue Router