Vue?router?路由安裝及使用過程
vue-router 是 Vue 的一個插件庫，適用于構建單頁面應用。
單頁面應用：整個應用中只有一個完整的頁面，切換頁面就是替換頁面中的內容。
工作原理：當瀏覽器的路徑發(fā)生改變時，路由器會自動顯示路徑所對應的組件。
嵌套路由：通過路由實現(xiàn)組件的嵌套展示，就叫做嵌套路由。
一. Vue-router 安裝及配置：
注：由于 vue-router 4 及以上的版本只能在 vue3 中使用，所以我們需要安裝 vue-router 3 的版本。
安裝指定版本：
npm install vue-router@版本號
安裝最新版本：
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 標簽類似于 a 標簽，而 to 屬性和 a 標簽的 href 屬性作用相似。
三、配置 Vue-router：
在 src 目錄下創(chuàng)建 router 文件夾，并在文件夾內創(chuàng)建 index.js 文件，添加以下內容。
// 引入Vue核心庫
import Vue from 'vue'
// 引入vue-router
import VueRouter from 'vue-router'
// 應用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
})
// 導出路由器
export default router引入組件的區(qū)別：
方式一：直接導入，就是在應用第一次執(zhí)行時，就會加載這個文件。
import Home from '../views/Home.vue' component: Home
方式二：路由懶加載，就是跳轉到這個頁面的時候，再去加載這個文件。
component: () => import('../views/About.vue')四、引入 Vue-router:
在 main.js 文件中引入 router，并掛載到 vue 實例上
import Vue from 'vue'
import App from './App.vue'
// 1.引入vue-router
import router from './router'
Vue.config.productionTip = false
new Vue({
// 2.掛載到vue實例上
router,
render: h => h(App)
}).$mount('#app')五、設置路由出口:
在 App.vue 組件中設置 router-view 標簽，指定組件呈現(xiàn)位置。
<template> <router-view></router-view> </template>
六、最終效果:
這樣就配置好了，當點擊鏈接時會修改瀏覽器的路徑，從而顯示對應的組件。
注意：
路由組件通常放在 views 文件夾內，而一般組件放在 components 文件夾內。
跳轉頁面時，會先將當前組件銷毀，再去加載新組件。
每個組件都有自己的 $route 屬性，里面存放著自己的路由信息。
整個應用只有一個 $router 路由器，可以通過組件的 $router 屬性獲取。
到此這篇關于Vue router 路由安裝以及使用的文章就介紹到這了,更多相關Vue router 路由安裝內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
熱更新全稱Hot Module Reload,常常在構建工具里面出現(xiàn),下面這篇文章主要介紹了Vue?Vite熱更新不起作用的正確解決辦法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-03-03
這篇文章主要介紹了Vant如何自定義組件適配iphone底部安全區(qū)問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了vue.js 上傳圖片實例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
本篇文章主要介紹了Vue.directive自定義指令的使用詳解，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-03-03
這篇文章主要介紹了Vue?動畫效果、過渡效果,本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-04-04
這篇文章主要介紹了Element Card 卡片的具體使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-07-07
這篇文章主要介紹了vue遮罩層如何阻止?jié)L動，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要為大家詳細介紹了Vue調用PC攝像頭實現(xiàn)拍照功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要給大家介紹了關于vue項目中使用vue-i18n報錯的解決方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-01-01
Vue中使用create-keyframe-animation與動畫鉤子完成復雜動畫
這篇文章主要介紹了Vue中使用create-keyframe-animation與動畫鉤子完成復雜動畫，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04