vue router的安裝與使用

使用vue腳手架建立專案，在是否使用路由器時選擇yes，等待專案安裝完畢

在專案的src根目錄中新增了乙個資料夾，叫做router，在router資料夾中有乙個index.js檔案

import vue from

'vue'
import router from
'vue-router'
import helloworld from
'@/components/helloworld'
vue.
use(router)
export
default
newrouter(]
})

將路由器的具體配置匯出，使用關鍵字export default來匯出。同時在new router中使用routes陣列，該陣列的作用是將url與元件建立連線，在瀏覽器位址列中輸入相應的url，就會呼叫相對應的元件

其中path預設為』/』，代表呼叫元件時的url名稱；component代表呼叫的元件名稱

修改index.js檔案，自己建立路由器，對頁面進行相應的修改

router-link標籤的作用是進行跳轉，與a標籤類似，在router-link中的to屬性代表要跳轉的url

router-view標籤的作用是顯示由路由註冊的元件

index.js

import vue from

'vue'
import router from
'vue-router'
import home from
'../components/home'
import about from
'../components/about'
vue.
use(router)
const routes =[,
]export
default
newrouter
()

>

>
>
這是首頁標題h2
>
>
這是首頁內容1111p
>
>
這是首頁內容2222p
>
div>
template
>
>
export
default
script
>
scoped
>
style
>

>

>
>
這是關於標題h2
>
>
這是關於內容1111p
>
>
這是關於內容2222p
>
div>
template
>
>
export
default
script
>
scoped
>
style
>

>

>
"/home"
>
首頁router-link
>
"/about"
>
關於router-link
>
>
router-view
>
div>
template
>
>
export
default
script
>
>
style
>

vue router的安裝和使用

1.安裝 npm install vue router或cnpm install vue router 或yarn add vue router 2.在新建router.js中引用如下 import vue from vue import vuerouter from vue router vue....

Vue router安裝及使用 切換

1 安裝 npm install vue router或cnpm install vue router或yarn add vue router 2 在新建router.js中引用如下 router.js建立在src資料夾下 importvuefrom vue importvuerouterfrom ...

如何安裝vue router

unpkg.com 提供了基於 npm 的 cdn 鏈結。上面的鏈結會一直指向在 npm 發布的最新版本。你也可以像 這樣指定 版本號 或者 tag。在 vue 後面載入 vue router，它會自動安裝的 npm npm install vue router 如果在乙個模組化工程中使用它，必須要...