快捷導(dǎo)航

Vue中路由的使用方法實(shí)例詳解

更新時(shí)間：2024年02月06日 09:49:16 作者：廠里英才

本文為大家介紹Vue中路由的使用方法,包括安裝路由創(chuàng)建路由并導(dǎo)出以及在應(yīng)用實(shí)例中使用vue-router的相關(guān)知識(shí),本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧

1 作用

能夠按不同的訪問(wèn)路徑，展示不同組件的內(nèi)容。

2 使用方法

2.1 安裝路由

在項(xiàng)目的終端或者路徑下的命令提示符窗口中，寫(xiě)入以下命令(其中的4是指版本為4)：

npm install vue-router@4

2.2 創(chuàng)建路由并導(dǎo)出

①在src目錄下創(chuàng)建一個(gè)router文件夾，再在其中創(chuàng)建index.js文件

注：當(dāng)然，其它名字.js也可以，只不過(guò)2.3的導(dǎo)入需要額外書(shū)寫(xiě)內(nèi)容

②向index.js中書(shū)寫(xiě)以下格式內(nèi)容：

//引入依賴
import { createRouter, createWebHistory } from 'vue-router'
//導(dǎo)入組件
//xx和yy可以替換為實(shí)際的內(nèi)容
import XxVue from '@/views/Xx.vue'
import YyVue from '@/views/Yy.vue'
//定義路由關(guān)系
const routes = [
    //這樣就可以通過(guò)http://localhost:5173/Xx訪問(wèn)Xx.vue的內(nèi)容了
    { path: '/Xx', component: XxVue},
    //同理，可以訪問(wèn)Yy.vue。并將其作為默認(rèn)頁(yè)面
    { path: '/', component: YyVue}
]
//定義路由
const router = createRouter({
    //history是路由模式，還有一種哈希方式(createWebHashHistory)，配置方式自行探索
    history: createWebHistory(),
    routes: routes
})
//導(dǎo)出路由
export default router

2.3 在應(yīng)用實(shí)例中使用vue-router

在main.js中引入如下內(nèi)容：

//這里只展示主要內(nèi)容,其它內(nèi)容...
import { createApp } from 'vue'
import App from './App.vue'
//導(dǎo)入路由,默認(rèn)導(dǎo)入index.js
//如果不是index.js，而是xx.js，則from '@/router/xx.js'
import router from '@/router'
const app = createApp(App)
app.use(router)
app.mount('#app')

2.4 聲明router-view，展示組件內(nèi)容

在App.vue中的<template>內(nèi)添加如下，進(jìn)去的默認(rèn)頁(yè)面就是Yy.vue了：

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

2.5 頁(yè)面跳轉(zhuǎn)

如果想在某個(gè)函數(shù)執(zhí)行之后，想跳轉(zhuǎn)某個(gè)頁(yè)面，可以如下使用：

①在該函數(shù)所在的頁(yè)面導(dǎo)入，如xx.vue：

import {useRouter} from 'vue-router'

②找到該函數(shù)，并向其中添加如下內(nèi)容：

const xx = async() => {
    //其它內(nèi)容...
    //router.push跳轉(zhuǎn)到指定頁(yè)面，這里是默認(rèn)頁(yè)面
    router.push('/')
}

3 補(bǔ)充內(nèi)容-子路由

如下圖所示，App.vue使用的叫一級(jí)路由，X.vue使用的就屬于二級(jí)路由(X->Z,X->H)，其中二級(jí)路由就可以稱為一級(jí)路由的子路由，：

如element-ui中的例子所示，要在當(dāng)前頁(yè)面訪問(wèn)的Option1就屬于子路由：

配置如下，在index.js中新增一些內(nèi)容：

//引入依賴
import { createRouter, createWebHistory } from 'vue-router'
//導(dǎo)入組件
//xx和yy可以替換為實(shí)際的內(nèi)容
import XxVue from '@/views/Xx.vue'
import YyVue from '@/views/Yy.vue'
import ZzVue from '@/views/Zz.vue'
import HhVue from '@/views/Hh.vue'
//定義路由關(guān)系
const routes = [
    //這樣就可以通過(guò)http://localhost:5173/Xx訪問(wèn)Xx.vue的內(nèi)容了
    { path: '/Xx', component: XxVue},
    //同理，可以訪問(wèn)Yy.vue。并將其作為默認(rèn)頁(yè)面
    //redirect:'/func/xyz'是將Zz.vue頁(yè)面作為進(jìn)入'/'默認(rèn)的訪問(wèn)的頁(yè)面
    //children:子路由
    { path: '/', component: YyVue,redirect:'/func/xyz', children:[
        { path: '/func/xyz', component: ZzVue},
        { path: '/func/zxy', component: HhVue},
    ]}
]
//定義路由
const router = createRouter({
    //history是路由模式，還有一種哈希方式(createWebHashHistory)，配置方式自行探索
    history: createWebHistory(),
    routes: routes
})
//導(dǎo)出路由
export default router

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

您可能感興趣的文章: