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

Vue3的vue-router超詳細(xì)使用示例教程

 更新時(shí)間：2022年12月15日 10:56:45   作者：小白阿檳  
這篇文章主要介紹了Vue3的vue-router超詳細(xì)使用,本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

搭建vue3環(huán)境

我們使用vite來(lái)搭建vue3環(huán)境(沒(méi)有安裝vite需要去安裝vite)

npm create vite routerStudy

在命令行選擇

請(qǐng)?zhí)砑訄D片描述

cd routerStudy
npm i
npm run dev

環(huán)境搭建成功??！

vue-router入門(mén)（寶寶模式）

下載vue-router

npm i vue-router@4

新建以下文件
src/components/File1.vue：

<template>
    <div>
        這是文件一
    </div>
</template>

<script setup lang="ts">

</script>

<style scoped>

</style>

src/components/File2.vue：

<template>
    <div>
        這是文件二
    </div>
</template>

<script setup lang="ts">

</script>

<style scoped>

</style>

在src下新建router文件夾
在router文件夾下新建router.ts:

import { createRouter,createWebHistory,createWebHashHistory } from 'vue-router'
import File1 from '../components/File1.vue'
import File2 from '../components/File2.vue'

const routes = [
    {
        path: '/',
        component:File1
    },
    {
        path: '/file2',
        component:File2
    }
]

const router = createRouter({
    // history: createWebHistory(),
    history:createWebHashHistory(),
    routes,
})

export default router;

修改src/main.ts

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router/router'

createApp(App).use(router).mount('#app')

修改src/components/HelloWorld.vue:

<script setup lang="ts">

</script>

<template>
    <router-view/>
    <button><router-link to="/">去文件一</router-link></button>
    <button><router-link to="/file2">去文件二</router-link></button> 
</template>

<style scoped>
</style>

點(diǎn)擊按鈕能夠切換成功則使用成功

請(qǐng)?zhí)砑訄D片描述

vue-router基礎(chǔ)（青年模式）

一。動(dòng)態(tài)路由匹配

1.帶參數(shù)的動(dòng)態(tài)路由匹配

當(dāng)我們需要對(duì)每個(gè)用戶加載同一個(gè)組件，但用戶id不同。我們就需要在vue-router種使用一個(gè)動(dòng)態(tài)字段來(lái)實(shí)現(xiàn)，再通過(guò)$routr.params來(lái)獲取值：

請(qǐng)?zhí)砑訄D片描述

我們用具體實(shí)例來(lái)實(shí)現(xiàn)一下：

（1）修改src/router/router.ts:

import { createRouter,createWebHistory,createWebHashHistory } from 'vue-router'
import File1 from '../components/File1.vue'
import File2 from '../components/File2.vue'

const routes = [
    {
        path: '/',
        component:File1
    },
    {
        path: '/file2/:username/abc/:userid', //注意看這個(gè)
        component:File2
    }
]

const router = createRouter({
    history: createWebHistory(),
    // history:createWebHashHistory(),
    routes,
})

export default router;

（2）修改組件HelloWorld.vue:

請(qǐng)?zhí)砑訄D片描述

(3) 修改組件File2.vue：

<template>
    <div>
        這是文件二
    </div>
</template>

<script setup lang="ts">
import {getCurrentInstance,onMounted } from 'vue'

const instance  = getCurrentInstance() 
if (instance != null) {
    const _this = instance.appContext.config.globalProperties //vue3獲取當(dāng)前this
    
onMounted(() => {
    console.log(_this.$route.params)
  })
}
</script>

<style scoped>

</style>

（4）點(diǎn)擊去文件二按鈕

請(qǐng)?zhí)砑訄D片描述

（5）查看控制臺(tái)

請(qǐng)?zhí)砑訄D片描述

2.捕獲所有路由或404 Not Found路由

當(dāng)用戶在導(dǎo)航欄亂輸一通后，路由表中沒(méi)有對(duì)應(yīng)的路由，這時(shí)候，就需要將用戶轉(zhuǎn)去404頁(yè)面。那么
我們?cè)撊绾翁幚砟兀?/p>

(1)修改router/router.ts:

import { createRouter,createWebHistory,createWebHashHistory } from 'vue-router'
import File1 from '../components/File1.vue'
import File2 from '../components/File2.vue'
import NotFound from '../components/NotFound.vue'
import UserGeneric from '../components/UserGeneric.vue'
const routes = [
    {
        path: '/',
        component:File1
    },
    {
        path: '/file2/:username/abc/:userid',
        component:File2
    },
    // 將匹配所有內(nèi)容并將其放在 `$route.params.pathMatch` 下
    {
        path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound
    },
    // 將匹配以 `/user-` 開(kāi)頭的所有內(nèi)容，并將其放在 `$route.params.afterUser` 下
    {
        path: '/user-:afterUser(.*)', component: UserGeneric
    },
]

const router = createRouter({
    history: createWebHistory(),
    // history:createWebHashHistory(),
    routes,
})

export default router;

(2)新建組件NotFound.vue:

<template>
    <div>
        糟糕！頁(yè)面沒(méi)有找到。。。嗚嗚嗚
    </div>
</template>

<script setup lang="ts">
import {getCurrentInstance,onMounted } from 'vue'

const instance  = getCurrentInstance() 
if (instance != null) {
    const _this = instance.appContext.config.globalProperties //vue3獲取當(dāng)前this
    
onMounted(() => {
    console.log(_this.$route.params)
  })
}
</script>

<style scoped>

</style>

(3)修改HelloWorld.vue

(4)點(diǎn)擊去404頁(yè)面按鈕（或者在地址欄亂寫(xiě)一通）

(5)出現(xiàn)404頁(yè)面，說(shuō)明運(yùn)行成功?。?！

二。嵌套路由

路由是可以嵌套的。例如：

嵌套的理解挺簡(jiǎn)單的，我就不多叭叭了，直接上代碼，看完就懂了。
（1）新建組件Children1.vue:

<template>
    <div>
        我是孩子1
    </div>
</template>

<script setup lang="ts">

</script>

<style scoped>

</style>

（2）新建組件Children2.vue:

<template>
    <div>
        我是孩子2
    </div>
</template>

<script setup lang="ts">

</script>

<style scoped>

</style>

<template>
    <div>
        我是孩子2
    </div>
</template>

<script setup lang="ts">

</script>

<style scoped>

</style>

(3)修改router/router.ts：

import { createRouter,createWebHistory,createWebHashHistory } from 'vue-router'
import File1 from '../components/File1.vue'
import File2 from '../components/File2.vue'
import NotFound from '../components/NotFound.vue'
import UserGeneric from '../components/UserGeneric.vue'
import Children1 from '../components/Children1.vue'
import Children2 from '../components/Children2.vue'



const routes = [
    {
        path: '/',
        component: File1,
        
    },
    {
        path: '/file2',
        component: File2,
        children: [  //使用嵌套路由
            {
                path: 'children1',
                component:Children1
            },
            {
                path: 'children2',
                component:Children2
            },
        ]
    },
    {
        path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound
    },
    {
        path: '/user-:afterUser(.*)', component: UserGeneric
    },
]

const router = createRouter({
    history: createWebHistory(),
    // history:createWebHashHistory(),
    routes,
})

export default router;

（4)修改組件HelloWorld.vue：

(5)修改組件File2.vue：

<template>
    <div>
        這是文件二
        <div>
            我是文件二里的內(nèi)容
            <router-view/>
            <button><router-link to="/file2/children1">找孩子1</router-link></button>
            <button><router-link to="/file2/children2">找孩子2</router-link></button>
        </div>
    </div>
</template>

<script setup lang="ts">

</script>

<style scoped>

</style>

(6)先點(diǎn)去文件二，再點(diǎn)擊找孩子1按鈕，出現(xiàn)即成功?。?/p>

請(qǐng)?zhí)砑訄D片描述

三。編程式導(dǎo)航

除了使用/< router-link/> 創(chuàng)建 a 標(biāo)簽來(lái)定義導(dǎo)航鏈接，我們還可以借助 router 的實(shí)例方法，通過(guò)編寫(xiě)代碼來(lái)實(shí)現(xiàn)。

1.router.push()方法的使用

(1)修改組件NotFound.vue:

<template>
    <div>
        糟糕！頁(yè)面沒(méi)有找到。。。嗚嗚嗚
    </div>
</template>

<script setup lang="ts">
import {getCurrentInstance,onMounted } from 'vue'

const instance  = getCurrentInstance() 
if (instance != null) {
    const _this = instance.appContext.config.globalProperties //vue3獲取當(dāng)前this


    // 1.字符串路徑
    _this.$router.push('/file2/children2')

    // 2.帶有路徑的對(duì)象
    // _this.$router.push({path:'/file2/children2'})

    // 3.命名的路由，并加上參數(shù)，讓路由建立 url
    // _this.$router.push({name:'file2',params:{username:'children2'}})

    // 4.帶查詢參數(shù)，結(jié)果是 /register?plan=private
    // _this.$router.push({ path: '/file2/children2', query: {userid:'123'} })


    onMounted(() => {
    console.log(_this.$route.params)
  })
}
</script>

<style scoped>

</style>

(2)再點(diǎn)“去404頁(yè)面”,發(fā)現(xiàn)沒(méi)有去404頁(yè)面了，說(shuō)明編程式導(dǎo)航成功??！

2.router.replace()方法的使用

它的作用類(lèi)似于 router.push，唯一不同的是，它在導(dǎo)航時(shí)不會(huì)向 history 添加新記錄，正如它的名字所暗示的那樣——它取代了當(dāng)前的條目。

修改組件NotFound.vue：

<template>
    <div>
        糟糕！頁(yè)面沒(méi)有找到。。。嗚嗚嗚
    </div>
</template>

<script setup lang="ts">
import {getCurrentInstance,onMounted } from 'vue'

const instance  = getCurrentInstance() 
if (instance != null) {
    const _this = instance.appContext.config.globalProperties //vue3獲取當(dāng)前this

    // 一。router.push的使用： 
    // 1.字符串路徑
    // _this.$router.push('/file2/children2')

    // 2.帶有路徑的對(duì)象
    // _this.$router.push({path:'/file2/children2'})

    // 3.命名的路由，并加上參數(shù)，讓路由建立 url
    // _this.$router.push({name:'file2',params:{username:'children2'}})

    // 4.帶查詢參數(shù)，結(jié)果是 /register?plan=private
    // _this.$router.push({ path: '/file2/children2', query: {userid:'123'} })

    // 二。router.replace的使用：
    _this.$router.replace('/file2/children1')


    onMounted(() => {
    console.log(_this.$route.params)
  })
}
</script>

<style scoped>

</style>

3.router.go()方法的使用

修改組件NotFound.vue：

<template>
    <div>
        糟糕！頁(yè)面沒(méi)有找到。。。嗚嗚嗚
    </div>
</template>

<script setup lang="ts">
import {getCurrentInstance,onMounted } from 'vue'

const instance  = getCurrentInstance() 
if (instance != null) {
    const _this = instance.appContext.config.globalProperties //vue3獲取當(dāng)前this

    // 一。router.push的使用： 
    // 1.字符串路徑
    // _this.$router.push('/file2/children2')

    // 2.帶有路徑的對(duì)象
    // _this.$router.push({path:'/file2/children2'})

    // 3.命名的路由，并加上參數(shù)，讓路由建立 url
    // _this.$router.push({name:'file2',params:{username:'children2'}})

    // 4.帶查詢參數(shù)，結(jié)果是 /register?plan=private
    // _this.$router.push({ path: '/file2/children2', query: {userid:'123'} })

    // 二。router.replace的使用：
    // _this.$router.replace('/file2/children1')

    // 三。router.go的使用：
    _this.$router.go(-1)  //相當(dāng)于點(diǎn)擊回退一次

    onMounted(() => {
    console.log(_this.$route.params)
  })
}
</script>

<style scoped>

</style>

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

相關(guān)文章

  • Element?Plus的el-tree-select組件懶加載+數(shù)據(jù)回顯詳解

    Element?Plus的el-tree-select組件懶加載+數(shù)據(jù)回顯詳解

    el-tree-select組件是el-tree和el-select的結(jié)合體,他們的原始屬性未被更改,下面這篇文章主要給大家介紹了關(guān)于Element?Plus的el-tree-select組件懶加載+數(shù)據(jù)回顯的相關(guān)資料,需要的朋友可以參考下
    2022-11-11
  • vue3二次封裝element-ui中的table組件的過(guò)程詳解

    vue3二次封裝element-ui中的table組件的過(guò)程詳解

    這篇文章主要給大家介紹了vue3二次封裝element-ui中的table組件的過(guò)程,文中通過(guò)代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友跟著小編一起來(lái)學(xué)習(xí)吧
    2024-01-01
  • vite+vue3+element-plus項(xiàng)目搭建的方法步驟

    vite+vue3+element-plus項(xiàng)目搭建的方法步驟

    因?yàn)関ue3出了一段時(shí)間了，element也出了基于vue3.x版本的element-plus，vite打包聽(tīng)說(shuō)很快，嘗試一下，感興趣的可以了解一下
    2021-06-06
  • 基于Vue實(shí)現(xiàn)一個(gè)textarea幽靈建議功能

    基于Vue實(shí)現(xiàn)一個(gè)textarea幽靈建議功能

    不知道你有沒(méi)有發(fā)現(xiàn)Bing AI聊天有個(gè)輸入提示功能,在用戶輸入部分內(nèi)容時(shí)后面會(huì)給出灰色提示文案,用戶只要按下tab鍵就可以快速添加提示的后續(xù)內(nèi)容,我將這個(gè)功能稱為幽靈建議,接下來(lái)我將用Vue框架來(lái)實(shí)現(xiàn)這個(gè)功能,需要的朋友可以參考下
    2023-09-09
  • Flutter部件內(nèi)部狀態(tài)管理小結(jié)之實(shí)現(xiàn)Vue的v-model功能

    Flutter部件內(nèi)部狀態(tài)管理小結(jié)之實(shí)現(xiàn)Vue的v-model功能

    本文是 Flutter 部件內(nèi)部狀態(tài)管理的小結(jié)，從部件的基礎(chǔ)開(kāi)始，到部件的狀態(tài)管理，并且在過(guò)程中實(shí)現(xiàn)一個(gè)類(lèi)似 Vue 的 v-model 的功能，感興趣的朋友跟隨小編一起看看吧
    2019-06-06
  • vue項(xiàng)目中如何引入cesium

    vue項(xiàng)目中如何引入cesium

    這篇文章主要介紹了vue項(xiàng)目中如何引入cesium問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2023-04-04
  • vue解決刷新頁(yè)面時(shí)會(huì)出現(xiàn)變量閃爍的問(wèn)題

    vue解決刷新頁(yè)面時(shí)會(huì)出現(xiàn)變量閃爍的問(wèn)題

    這篇文章主要介紹了vue解決刷新頁(yè)面時(shí)會(huì)出現(xiàn)變量閃爍的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2022-01-01
  • 詳解vue中this.$emit()的返回值是什么

    詳解vue中this.$emit()的返回值是什么

    這篇文章主要介紹了詳解vue中this.$emit()的返回值是什么，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-04-04
  • vue-cli+webpack記事本項(xiàng)目創(chuàng)建

    vue-cli+webpack記事本項(xiàng)目創(chuàng)建

    這篇文章主要為大家詳細(xì)介紹了vue-cli+webpack創(chuàng)建記事本項(xiàng)目，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2017-04-04
  • 使用this.$router.go(-1)遇到的一些問(wèn)題及解決

    使用this.$router.go(-1)遇到的一些問(wèn)題及解決

    這篇文章主要介紹了使用this.$router.go(-1)遇到的一些問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-12-12

最新評(píng)論