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

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

一、什么是路由？

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，讓構建單頁面應用變得易如反掌。路由實際上就是可以理解為指向，就是我在頁面上點擊一個按鈕需要跳轉到對應的頁面，這就是路由跳轉；

首先我們來學習三個單詞（route，routes，router）：

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

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

router：譯為路由器，上面都是路由，這個是路由器，我們可以理解為一個容器包含上述兩個或者說它是一個管理者，負責管理上述兩個；舉個常見的場景的例子：當用戶在頁面上點擊按鈕的時候，這個時候router就會去routes中去查找route，就是說路由器會去路由集合中找對應的路由。

二、使用步驟

1.創(chuàng)建項目

安裝好項目后，項目目錄如下：

2.安裝路由

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

隨后在該項目目錄下輸入命令

npm install vue-router@版本號

3.創(chuàng)建文件

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

1.HelloWorld.vue文件

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

<template>
  <div class="hello">
    <h2>HelloWorld</h2>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h4 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

2.Test.vue文件

<template>
	<div>
		<h3>Test</h3>
	</div>
</template>

<script>
	// 導出
	export default {
		name: 'TestItem'
	}
</script>

<style>
</style>

3.index.js文件

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

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

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

// 拋出這個這個實例對象方便外部讀取以及訪問
export default router

4.main.js文件

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

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

5.App.vue文件

<template>
  <div id="app">
    <!--使用 router-link 組件進行導航 -->
    <!--通過傳遞 `to` 來指定鏈接 -->
    <!--`<router-link>` 將呈現(xiàn)一個帶有正確 `href` 屬性的 `<a>` 標簽-->
    <router-link to="/hw">HelloWorld</router-link>
    <router-link to="/test">Test</router-link>
    <hr>
    <!-- 路由出口 -->
    <!-- 路由匹配到的組件將渲染在這里 -->
    <router-view></router-view>
  </div>
</template>

<script>


export default {
  name: 'App',
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

三.運行項目

1.在項目文件下打開cmd，輸入yarn serve

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

3.點擊HelloWorld，頁面無需刷新，跳轉至http://localhost:8080/#/hw

4.點擊Test，頁面無需刷新，跳轉至http://localhost:8080/#/test

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

網(wǎng)站欄目：vueRouter路由如何使用
標題路徑：http://sd-ha.com/article42/gcjcec.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、品牌網(wǎng)站制作、微信小程序、網(wǎng)站排名、商城網(wǎng)站、App開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)