vue-router 是 Vue 的一個(gè)插件庫，適用于構(gòu)建單頁面應(yīng)用。

單頁面應(yīng)用：整個(gè)應(yīng)用中只有一個(gè)完整的頁面，切換頁面就是替換頁面中的內(nèi)容。

工作原理：當(dāng)瀏覽器的路徑發(fā)生改變時(shí)，路由器會(huì)自動(dòng)顯示路徑所對(duì)應(yīng)的組件。

嵌套路由：通過路由實(shí)現(xiàn)組件的嵌套展示，就叫做嵌套路由。

 一. Vue-router 安裝及配置：

注：由于 vue-router 4 及以上的版本只能在 vue3 中使用，所以我們需要安裝 vue-router 3 的版本。

 安裝指定版本：

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

安裝最新版本：

 npm install vue-router

二、創(chuàng)建路由組件：

在 src 目錄下創(chuàng)建 views 文件夾，并創(chuàng)建 Home.vue 和 About.vue 組件。

<template>
    <div>
        <h1>Home頁面</h1>
        <router-link to="/about">前往About頁面</router-link>
    </div>
</template>
<script>
export default {
    name: "Home"
}
</script>

<template>
    <div>
        <h1>About頁面</h1>
        <router-link to="/">前往Home首頁</router-link>
    </div>
</template>
<script>
export default {
    name: "About"
}
</script>

備注：router-link 標(biāo)簽類似于 a 標(biāo)簽，而 to 屬性和 a 標(biāo)簽的 href 屬性作用相似。

三、配置 Vue-router：

在 src 目錄下創(chuàng)建 router 文件夾，并在文件夾內(nèi)創(chuàng)建 index.js 文件，添加以下內(nèi)容。

// 引入Vue核心庫
import Vue from 'vue'
// 引入vue-router
import VueRouter from 'vue-router'
// 應(yīng)用vue-router插件
Vue.use(VueRouter)
// 引入組件（方式一）
import Home from '../views/Home.vue'
// 配置路由
const routes = [
  {
	// 路徑，/ 表示首頁
    path: '/',
    // 使用組件（方式一）
    component: Home
  },
  {
	// 路徑
    path: '/about',
    // 引入并使用組件（方式二）
    component: () => import('../views/About.vue')
  }
]
// 創(chuàng)建路由器
const router = new VueRouter({
  routes
})
// 導(dǎo)出路由器
export default router

引入組件的區(qū)別：

方式一：直接導(dǎo)入，就是在應(yīng)用第一次執(zhí)行時(shí)，就會(huì)加載這個(gè)文件。

import Home from '../views/Home.vue'
component: Home

方式二：路由懶加載，就是跳轉(zhuǎn)到這個(gè)頁面的時(shí)候，再去加載這個(gè)文件。

component: () => import('../views/About.vue')

四、引入 Vue-router:

在 main.js 文件中引入 router，并掛載到 vue 實(shí)例上

import Vue from 'vue'
import App from './App.vue'
// 1.引入vue-router
import router from './router'
Vue.config.productionTip = false
new Vue({
  // 2.掛載到vue實(shí)例上
  router,
  render: h => h(App)
}).$mount('#app')

五、設(shè)置路由出口:

在 App.vue 組件中設(shè)置 router-view 標(biāo)簽，指定組件呈現(xiàn)位置。

<template>
  <router-view></router-view>
</template>

六、最終效果:

這樣就配置好了，當(dāng)點(diǎn)擊鏈接時(shí)會(huì)修改瀏覽器的路徑，從而顯示對(duì)應(yīng)的組件。

注意：

  路由組件通常放在 views 文件夾內(nèi)，而一般組件放在 components 文件夾內(nèi)。

  跳轉(zhuǎn)頁面時(shí)，會(huì)先將當(dāng)前組件銷毀，再去加載新組件。

  每個(gè)組件都有自己的 $route 屬性，里面存放著自己的路由信息。

  整個(gè)應(yīng)用只有一個(gè) $router 路由器，可以通過組件的 $router 屬性獲取。

到此這篇關(guān)于Vue router 路由安裝以及使用的文章就介紹到這了,更多相關(guān)Vue router 路由安裝內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論