Day 26 Vue-router簡介- iT 邦幫忙 | vue網址
前言昨天介紹完VueCLI2、3如何建立後,我們今天來認識一下Vue-router怎麼使用吧!VueRouter簡介VueRouter就是由前端模擬的路由,跟過去不同的是,換頁通常會由後端處理。而VueRouter存在就是為了實現SPA(單頁式應用),當我們切換畫面時候就不需要向後端發出請求。安裝方式一、方法一1.npminstallvue-router不用寫成這樣npminstallvue-router--save因為,Npm5.0.0版本後,安裝的套件會預設自動加入dependency連結說明[1]2.接著在終端機中輸入npmrunserve補充:使用npmrundev,會出錯因為package.json沒有這行指令vue开发----npmrunde...
前言昨天介紹完Vue CLI2、3如何建立後,我們今天來認識一下Vue-router怎麼使用吧!
Vue Router簡介Vue Router就是由前端模擬的路由,跟過去不同的是,換頁通常會由後端處理。而Vue Router存在就是為了實現SPA(單頁式應用),當我們切換畫面時候就不需要向後端發出請求。
安裝方式一、方法一1.npm install vue-router不用寫成這樣npm install vue-router --save因為,Npm5.0.0版本後,安裝的套件會預設自動加入dependency連結說明[1]
2.接著在終端機中輸入 npm run serve 補充:使用npm run dev,會出錯因為package.json沒有這行指令vue开发----npm run dev 报错:missing script:dev[2]原因:npm run dev是Vue CLI2指令npm run serve則是Vue CLI3指令
兩者不可以混用喔!
3.接著要在router.js啟用Vue.use(VueRouter)
二、方法二創建新的檔案時( vue create project),就直接勾選Vue router,Vue就會幫我們直接新增router.js
以上兩種方式,都可以安裝Vue Router
路由配置介紹 組件名詞介紹<router-view></router-view> 呈現路由配置元件<router-link></router-link> 路由路徑main.js 進路點Vue Components(如:app.vue檔) 分頁內容
路由配置教學配置路由會在router.js、main.js、app.vue這三個檔案設定
router.js主要負責處理路由檔案配置管理。補充:1.@是絕對路徑,src 目錄的縮寫2.export default 是 ES6 的...