本篇內(nèi)容主要講解“vue Router路由如何使用”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“vue Router路由如何使用”吧!

網(wǎng)站建設(shè)哪家好，找成都創(chuàng)新互聯(lián)公司！專注于網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、成都微信小程序、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了大連免費(fèi)建站歡迎大家使用！

一、什么是路由？

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，讓構(gòu)建單頁面應(yīng)用變得易如反掌。路由實(shí)際上就是可以理解為指向，就是我在頁面上點(diǎn)擊一個(gè)按鈕需要跳轉(zhuǎn)到對(duì)應(yīng)的頁面，這就是路由跳轉(zhuǎn)；

首先我們來學(xué)習(xí)三個(gè)單詞（route，routes，router）：

route：首先它是個(gè)單數(shù)，譯為路由，即我們可以理解為單個(gè)路由或者某一個(gè)路由；

routes：它是個(gè)復(fù)數(shù)，表示多個(gè)的集合才能為復(fù)數(shù)；即我們可以理解為多個(gè)路由的集合，JS中表示多種不同狀態(tài)的集合的形式只有數(shù)組和對(duì)象兩種，事實(shí)上官方定義routes是一個(gè)數(shù)組；所以我們記住了，routes表示多個(gè)數(shù)組的集合；

router：譯為路由器，上面都是路由，這個(gè)是路由器，我們可以理解為一個(gè)容器包含上述兩個(gè)或者說它是一個(gè)管理者，負(fù)責(zé)管理上述兩個(gè)；舉個(gè)常見的場(chǎng)景的例子：當(dāng)用戶在頁面上點(diǎn)擊按鈕的時(shí)候，這個(gè)時(shí)候router就會(huì)去routes中去查找route，就是說路由器會(huì)去路由集合中找對(duì)應(yīng)的路由。

二、使用步驟

1.創(chuàng)建項(xiàng)目

安裝好項(xiàng)目后，項(xiàng)目目錄如下：

2.安裝路由

打開項(xiàng)目下 package.json文件，查看 vue 版本。
vue 版本為 2.x，建議 vue-router 安裝 3.x 版本。
vue 版本為 3.x，建議 vue-router 安裝 4.x 版本。

隨后在該項(xiàng)目目錄下輸入命令

npm install vue-router@版本號(hào)

3.創(chuàng)建文件

打開 src 文件夾，創(chuàng)建以下幾個(gè)文件（有的默認(rèn)創(chuàng)建好了）

1.HelloWorld.vue文件

該文件為默認(rèn)創(chuàng)建文件，為了演示方便刪除多余代碼

h4 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}

2.Test.vue文件

3.index.js文件

// 引入vue
import Vue from 'vue';
// 引入vue-router
import VueRouter from 'vue-router';
// 注冊(cè) 第三方庫需要use一下才能用
Vue.use(VueRouter)
// 引入HelloWorld頁面
import HelloWorld from '../components/HelloWorld.vue'
// 引入Test頁面
import Test from '../components/Test.vue'

// 定義routes路由的集合，數(shù)組類型
const routes=[
    //單個(gè)路由均為對(duì)象類型，path代表的是路徑，component代表組件
    {path:'/hw',component:HelloWorld},
    {path:"/test",component:Test}
]

// 實(shí)例化VueRouter并將routes添加進(jìn)去
const router = new VueRouter({
// ES6簡寫，等于routes：routes
    routes
});

// 拋出這個(gè)這個(gè)實(shí)例對(duì)象方便外部讀取以及訪問
export default router

4.main.js文件

import Vue from 'vue'
import App from './App.vue'
import router from './router/index.js'
// 阻止vue在啟動(dòng)時(shí)生成的生產(chǎn)提示
Vue.config.productionTip = false

new Vue({
  	router: router,
	render: h => h(App),
}).$mount('#app')

5.App.vue文件

三.運(yùn)行項(xiàng)目

1.在項(xiàng)目文件下打開cmd，輸入yarn serve

2.打開瀏覽器，訪問 http://localhost:8080/

3.點(diǎn)擊HelloWorld，頁面無需刷新，跳轉(zhuǎn)至http://localhost:8080/#/hw

4.點(diǎn)擊Test，頁面無需刷新，跳轉(zhuǎn)至http://localhost:8080/#/test

到此，相信大家對(duì)“vue Router路由如何使用”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！