Vue router安裝及使用 切換

2021-10-08 11:38:30 字數 1841 閱讀 2255

1、安裝:npm install vue-router或cnpm install vue-router或yarn add vue-router

2、在新建router.js中引用如下**(router.js建立在src資料夾下)

importvuefrom'vue'

importvuerouterfrom'vue-router'

vue.

use(vuerouter)

3、在src中新建view資料夾,在view新建例如:home資料夾,在資料夾中新建index.vue

<

template

>

"home"

>

>

<

/div>

<

/template

>

import content from "../../components/content.vue"

export

default},

components:

, methods:

}<

/script>

<

/style>

4、在router.js中設定如下兩步

import home from './views/home/'

export default new vuerouter(,,]

})

<

/router-view>

6、在main.js中

import vue from

'vue'

import router from

'./router'

vue.config.productiontip =

false

newvue()

.$mount

()

1.在components中引入切換的檔案

2.配置index.vue

>

"home"

>

/>

"/home/text1"

>

>

text1span

>

router-link

>

"/home/text2"

>

>

text2span

>

router-link

>

"/home/text3"

>

>

text3span

>

router-link

>

>

router-view

>

div>

template

>

3.配置router.js

import text1 from './components/text1'

import text2 from './components/text2'

import text3 from './components/text3'

export default new vuerouter(,

,,,]

}]})

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的安裝與使用

使用vue腳手架建立專案,在是否使用路由器時選擇yes,等待專案安裝完畢 在專案的src根目錄中新增了乙個資料夾,叫做router,在router資料夾中有乙個index.js檔案 import vue from vue import router from vue router import he...

如何安裝vue router

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