iT邦幫忙

2023 iThome 鐵人賽
DAY 9
0
Vue.js

從入門到入土一條龍Vue.js系列 第 9 篇

從入門到入土一條龍Vue.js Day09- Vue Router 的使用

15th鐵人賽 vue學習筆記 vuejs
256 瀏覽

  • 分享至 

  • xImage
    •  

Vue Router

Vue Router 是官方的路由管理器，允許我們建立單頁應用(SPA)。隨著 Vue 應用不斷增長，我們需要的不只是基礎功能，還有如何管理多個視圖、巢狀路由、懶加載等功能。

安裝VueRouter

https://ithelp.ithome.com.tw/upload/images/20230909/20162353T58Itl10cL.png
輸入npm install vue-router 或 yarn add vue-router

建立2個模板和App.vue

https://ithelp.ithome.com.tw/upload/images/20230909/20162353NE8ijYtpuX.png
https://ithelp.ithome.com.tw/upload/images/20230909/20162353kqdRCMBkkA.png
https://ithelp.ithome.com.tw/upload/images/20230910/20162353weynvZieVB.png
https://ithelp.ithome.com.tw/upload/images/20230909/20162353XcwacGEYAg.png
設定2個模板如上圖

main.js設定

https://ithelp.ithome.com.tw/upload/images/20230909/20162353bJJrmQu3KL.png

  • 匯入 vue , vueRouter ,Home 和 About
  • 設定vue使用vueRouter
  • 設定routes值
  • 設定新router
  • 使用路由

完成

https://ithelp.ithome.com.tw/upload/images/20230909/20162353YPGuauKGc4.png
可以點擊切換router

現在，當您啟動應用時，您應該可以在 Home 和 About 之間進行導航，而無需重新加載頁面。


上一篇
從入門到入土一條龍Vue.js Day08- To Do List（實做）
下一篇
從入門到入土一條龍Vue.js Day10- Vue Router 的使用（二）
系列文
從入門到入土一條龍Vue.js 共 12 篇
  1. 8
    從入門到入土一條龍Vue.js Day08- To Do List（實做）
  2. 9
    從入門到入土一條龍Vue.js Day09- Vue Router 的使用
  3. 10
    從入門到入土一條龍Vue.js Day10- Vue Router 的使用（二）
  4. 11
    從入門到入土一條龍Vue.js Day11-Vuex狀態管理
  5. 12
    從入門到入土一條龍Vue.js Day12 - Mixins
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
1123 組
團體組數
52 組
累計文章數
23097 篇
完賽人數
656 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css react 程式設計 vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙