快捷導(dǎo)航

Vue?router?路由安裝及使用過(guò)程

更新時(shí)間：2023年10月11日 10:13:51 作者：小吳吳吳呀

vue-router 是 Vue 的一個(gè)插件庫(kù)，適用于構(gòu)建單頁(yè)面應(yīng)用，這篇文章主要介紹了Vue?router?路由安裝以及使用,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下

一. 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頁(yè)面</h1>
        <router-link to="/about">前往About頁(yè)面</router-link>
    </div>
</template>
<script>
export default {
    name: "Home"
}
</script>

<template>
    <div>
        <h1>About頁(yè)面</h1>
        <router-link to="/">前往Home首頁(yè)</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核心庫(kù)
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 = [
  {
	// 路徑，/ 表示首頁(yè)
    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è)頁(yè)面的時(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)頁(yè)面時(shí)，會(huì)先將當(dāng)前組件銷毀，再去加載新組件。

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

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

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

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue?router?路由安裝及使用過(guò)程

目錄

一. Vue-router 安裝及配置：

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

三、配置 Vue-router：

四、引入 Vue-router:

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

六、最終效果:

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue?router?路由安裝及使用過(guò)程

目錄

一. Vue-router 安裝及配置：

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

三、配置 Vue-router：

四、引入 Vue-router:

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

六、最終效果:

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

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

三、配置 Vue-router：

四、引入 Vue-router:

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

六、最終效果: