国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

Vue3 中路由Vue Router 的使用

這篇具有很好參考價值的文章主要介紹了Vue3 中路由Vue Router 的使用。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方,請大家不吝賜教,您也可以點擊"舉報違法"按鈕提交疑問。

前言:

在編寫vue里的SPA(Single Page Application單頁面應(yīng)用)時,我們始終繞不開路由的使用,vue-router4.0版里有一些重要更新,在這里分享給大家。


一、什么是 Vue Router ?

vue-router是vue.js官方給出的路由解決方案,能夠輕松的管理SPA項目中組件的切換

Vue Router 是 Vue.js 的官方路由。它與 Vue.js 核心深度集成,讓用 Vue.js 構(gòu)建單頁應(yīng)用變得輕而易舉。功能包括:

  • List item
  • 嵌套路由映射
  • 動態(tài)路由選擇
  • 模塊化、基于組件的路由配置
  • 路由參數(shù)、查詢、通配符
  • 展示由 Vue.js 的過渡系統(tǒng)提供的過渡效果
  • 細致的導(dǎo)航控制
  • 自動激活 CSS 類的鏈接
  • HTML5 history 模式或 hash 模式
  • 可定制的滾動行為
  • URL 的正確編碼

二、路由的使用

1、路由的安裝

npm install vue-router@4

2、路由的模式

  • createWebHashHistory():Hash模式
    • 它在內(nèi)部傳遞的實際URL之前使用了一個哈希字符#,如 https://example.com/#/user/id
    • 由于這部分 URL 從未被發(fā)送到服務(wù)器,所以它不需要在服務(wù)器層面上進行任何特殊處理
  • createWebHistory():history模式,推薦使用
    • 當(dāng)使用這種歷史模式時,URL會看起來很“正?!保?https://example.com/user/id
    • 由于我們的應(yīng)用是一個單頁的客戶端應(yīng)用,如果沒有適當(dāng)?shù)姆?wù)器配置,用戶在瀏覽器中直接訪問https://example.com/user/id,就會得到一個404錯誤;要解決這個問題,你需要做的就是在你的服務(wù)器上添加一個簡單的回退路由,如果URL不匹配任何靜態(tài)資源,它應(yīng)提供與你的應(yīng)用程序中的index.html相同的頁面

3、創(chuàng)建路由模塊

  1. 在項目中的src文件夾中創(chuàng)建一個router文件夾,在其中創(chuàng)建index.js模塊
  2. 采用createRouter()創(chuàng)建路由,并暴露出去
  3. 在main.js文件中初始化路由模塊app.use(router)
// router/index.js

import { createRouter, createWebHistory } from "vue-router";
import HomeView from '@/views/HomeView.vue'

// 創(chuàng)建路由規(guī)則
let routes = [
    {
        path: '/', // URL 地址
        name: 'home',  // 名稱
        component: HomeView  // 渲染該組件
    },
]

// 創(chuàng)建路由
const router = createRouter({
    // 使用 history 模式
    history: createWebHistory(),
    // 路由規(guī)則
    routes
})

// 將路由對象暴露出去
export default router



// main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'  // 引入路由模塊
let app = createApp(App)

app.use(router) // 初始化路由插件

app.mount('#app')

4、聲明路由鏈接和占位符

  • < router-link>:路由鏈接,to屬性則為點擊此元素,需要切換的路由地址
  • < router-view>:路由占位符,路由切換的視圖展示的位置
<template>
	<!--   路由鏈接,點擊是路由地址會切換到屬性 to 的地方   -->
    <router-link to="/">首頁</router-link>
    |
    <router-link to="/blog">博客</router-link>
    <hr>
	<!--   路由試圖,路由切換組件的地方   -->
    <router-view/>
</template>

三、路由的重定向和別名

在路由規(guī)則中,可采用redirect來重定向另一個地址

// 路徑寫法
const routes = [{ path: '/home', redirect: '/' }]
// 命名寫法
const routes = [{ path: '/home', redirect: { name: 'home' } }]
]

別名表示訪問url時自由命名,不受約束,router會自動進行別名匹配,就像我們設(shè)置/的別名為/home,相當(dāng)于訪問 /

// alias是別名的key
const routes = [{ path: '/', component: HomeView, alias: '/home' }]

四、嵌套路由

如果在路由視圖中展示的組件中包含自己的路由占位符,則此處會用到嵌套路由
如圖所示:點擊關(guān)于鏈接,則會顯示About組件,在其組件中又包含了路由鏈接和路由占位符
vue3 router,vue3,vue.js,javascript,前端
嵌套路由規(guī)則

  1. 在某一個路由規(guī)則中采用children來聲明嵌套路由的規(guī)則
  2. 嵌套路由規(guī)則中的path不能以/開頭,訪問需使用/father/son的形式
// router/index.js

{
    path: '/father',
    name: 'father',
    component:  () => import('@/views/father.vue'),
    // 嵌套路由
    children: [
        {
            path: 'son', // path 前面不要加 /
            name: 'son',
            component: () => import('@/views/son.vue')
        },
    ]
}


// father.vue 頁面
<template>  
    <div class="school">
        我是 father 頁面:
        <router-link to="/father/son">子頁面</router-link>
        <hr>
		<!-- 該組件中自己的路由視圖 -->
        <router-view />
    </div>
</template>

五、聲明式和編程式導(dǎo)航

聲明式 編程式 描述
< router-link :to=“…”> router.push(…) 會向history棧添加一個新的記錄,所以,當(dāng)用戶點擊瀏覽器后退按鈕時,會回到之前的URL

1、聲明式導(dǎo)航

  1. 很多時候,我們需要將給定匹配模式的路由映射到同一個組件,例如:想渲染不同博客的內(nèi)容,其>實只是渲染到同一個組件上,只是博客的編號不同而已
  2. 在Vue Router中,可以在路徑中使用一個動態(tài)字段來實現(xiàn),我們稱之為“路徑參數(shù)” ,語法如:path: ‘/url/:param’
  3. 在展示的組件中訪問路徑參數(shù)
    3.1. 在選項式 APIJS中采用this. r o u t e . p a r a m s 來訪問,試圖模板上采用 route.params來訪問,試圖模板上采用 route.params來訪問,試圖模板上采用route.params來訪問
    3.2. 在組合式 API 中,需要import { useRoute } from ‘vue-router’,JS和視圖模板上通過useRoute().params來訪問
    3.3. 還可以通過在路由規(guī)則上添加props: true,將路由參數(shù)傳遞給組件的props中
// router/index.js
{
    path: '/father',
    name: 'father',
    component:  () => import('@/views/father.vue'),
    // 嵌套路由
    children: [
        {
            path: 'son/:id', // path 前面不要加 / (路徑傳參)
            name: 'son',
            component: () => import('@/views/son.vue'),
            props: true  // 將路徑參數(shù)傳遞到展示組件的 props 中
        },
    ]
}


// father.vue
<template>  
    <div class="school">
        我是 father 頁面:
        <router-link to="/father/son">子頁面</router-link>
        <hr>
		<!-- 該組件中自己的路由視圖 -->
        <router-view />
    </div>
</template>


// son.vue 選項式
<script>
export default {
    // 通過 props 來接收路徑參數(shù)
    props: { id: String },
    methods: {
        showRouteParams() {
            // 通過 `this.$route.params` 獲取路徑參數(shù)
            console.log(this.$route.params)
          	// 取出指定的路徑參數(shù)
            console.log(this.$route.params.id)
            // 輸出 props 中得到的路徑參數(shù)
            console.log("輸出 props 中得到的路徑參數(shù):" + this.id)
        }
    }
}
</script>

<template>
    <div class="math">
        我是 BlogContent 頁面
        <ul>
            <li>通過 `this.$route.params` 獲取路徑參數(shù) -- {{ $route.params }}</li>
            <li>取出指定的路徑參數(shù) -- {{ $route.params.id }}</li>
            <li>輸出 props 中得到的路徑參數(shù) id -- {{ id }}</li>
        </ul>
        <button @click="showRouteParams">在 JS 中訪問路徑參數(shù)</button>
    </div>
</template>


// son.vue 組合式
<script setup>
import { useRoute } from 'vue-router'

// 通過 props 來接收路徑參數(shù)
let propsData = defineProps({ id: String })

// 獲取路由跳轉(zhuǎn)對象
let route = useRoute()

function showRouteParams() {
    console.log(route.params) // 通過 `route` 獲取路徑參數(shù)
    console.log(route.params.id) // 取出指定的路徑參數(shù)
    console.log("輸出 props 中得到的路徑參數(shù):" + propsData.id)
}
</script>

<template>
    <div class="math">
        我是 BlogContent 頁面
        <ul>
            <li>通過 `route` 獲取路徑參數(shù) -- {{ route.params }}</li>
            <li>取出指定的路徑參數(shù):{{ route.params.id }}</li>
            <li>輸出 props 中得到的路徑參數(shù) id -- {{ id }}</li>
        </ul>
        <button @click="showRouteParams">在 JS 中訪問路徑參數(shù)</button>
    </div>
</template>

2、編程式導(dǎo)航

提示:

編程式的router.push(…)的語法

  1. 其的參數(shù)可以是一個字符串路徑,或者一個描述地址的對象
  2. 如果參數(shù)是描述地址的對象的話,其對象中path和params不能同時使用
// 編程式導(dǎo)航
const username = 'eduardo'

// 我們可以手動建立 url,但我們必須自己處理編碼
router.push(`/user/${username}`) // -> /user/eduardo

// 同樣
router.push({ path: `/user/${username}` }) // -> /user/eduardo

// 如果可能的話,使用 `name` 和 `params` 從自動 URL 編碼中獲益(params名必須和 router規(guī)則中的名一致)
router.push({ name: 'user', params: { username } }) // -> /user/eduardo

// `params` 不能與 `path` 一起使用
router.push({ path: '/user', params: { username } }) // -> /user

3、替換當(dāng)前位置

聲明式 編程式 描述
< router-link :to=“…” replace> router.replace(…) 它的作用類似于router.push(…),唯一不同的是,它在導(dǎo)航時不會向history添加新記錄,正如它的名字所暗示的那樣,它取代了當(dāng)前的條目

提示:

也可以直接在傳遞給router.push的routeLocation中增加一個屬性replace: true
router.push({ path: '/home', replace: true })

// 相當(dāng)于
router.replace({ path: '/home' })

4、路由歷史

router.go(n) 該方法采用一個整數(shù)作為參數(shù),表示在歷史堆棧中前進或后退多少步,類似于 window.history.go(n)

// 向前移動一條記錄,與 router.forward() 相同
router.go(1)

// 返回一條記錄,與 router.back() 相同
router.go(-1)

// 前進 3 條記錄
router.go(3)

// 如果沒有那么多記錄,靜默失敗
router.go(-100)
router.go(100)

總結(jié):

歡迎大家加入我的社區(qū),在社區(qū)中會不定時發(fā)布一些精選內(nèi)容:https://bbs.csdn.net/forums/db95ba6b828b43ababd4ee5e41e8d251?category=10003


以上就是 Vue3 中路由Vue Router 的使用,不懂得也可以在評論區(qū)里問我或私聊我詢問,以后會持續(xù)發(fā)布一些新的功能,敬請關(guān)注。
我的其他文章:https://blog.csdn.net/weixin_62897746?type=blog文章來源地址http://www.zghlxwxcb.cn/news/detail-787898.html

到了這里,關(guān)于Vue3 中路由Vue Router 的使用的文章就介紹完了。如果您還想了解更多內(nèi)容,請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!

本文來自互聯(lián)網(wǎng)用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務(wù),不擁有所有權(quán),不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載,請注明出處: 如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實不符,請點擊違法舉報進行投訴反饋,一經(jīng)查實,立即刪除!

領(lǐng)支付寶紅包贊助服務(wù)器費用

相關(guān)文章

  • vue3+ts:安裝路由(router)

    vue3+ts:安裝路由(router)

    ? ? ? ?1.安裝vue-router ????????vue3需要安裝4.0以上版本 ????????vue2最好安裝4.0以下版本 ? ? ? ? 安裝命令: ? ? ? ? 安裝完成后,在package.json中查看vue-router是否安裝成功 ? src目錄下新建一個router文件夾,在router文件夾里新建一個index.ts文件,代碼如下: main.ts中代碼

    2024年02月06日
    瀏覽(19)
  • Vue3/ Vue3內(nèi) Vue-router Vue3路由 完整配置流程

    Vue3/ Vue3內(nèi) Vue-router Vue3路由 完整配置流程

    (1). yarn add vue-router (2) 創(chuàng)建 router/index.js 文件 (3) improt 引入 createRouter improt { createRouter ?}? from \\\'vue-router (4) 調(diào)用 createRouter 并定義變量名 ?cosnt router = createRouter()? (5) export default 導(dǎo)出 router? export default?router? (6) createRouter() 內(nèi)添加對象 并定義 history ? ?history: createMemoryHistory()

    2023年04月08日
    瀏覽(23)
  • Vue3的vue-router路由詳解

    Vue3的vue-router路由詳解

    這篇文章是接著【三分鐘快速搭建Vue3+webpack項目】的內(nèi)容做的開發(fā),有基礎(chǔ)的可以跳過?【三分鐘快速搭建Vue3+webpack項目】,直接看以下的內(nèi)容。 Vue3的vue-router路由詳解: 首先安裝路由依賴模塊: 所需代碼文件如下圖: 圖1 ? 所需要的主要文件: index.html、index.js、App.vue in

    2024年02月01日
    瀏覽(22)
  • 【vue3】13-前端路由-Vue-Router的詳解: 從入門到掌握

    【vue3】13-前端路由-Vue-Router的詳解: 從入門到掌握

    路由其實是網(wǎng)絡(luò)工程中的一個術(shù)語: 在 架構(gòu)一個網(wǎng)絡(luò) 時,非常重要的兩個設(shè)備就是 路由器和交換機 。 當(dāng)然,目前在我們生活中 路由器 也是越來越被大家所熟知,因為我們生活中都會用到 路由器 : 事實上, 路由器 主要維護的是一個 映射表 ; 映射表 會決定數(shù)據(jù)的流向; 路由

    2024年02月09日
    瀏覽(58)
  • 基于vscode開發(fā)vue3項目的詳細步驟教程 3 前端路由vue-router

    基于vscode開發(fā)vue3項目的詳細步驟教程 3 前端路由vue-router

    1、Vue下載安裝步驟的詳細教程(親測有效) 1_水w的博客-CSDN博客 2、Vue下載安裝步驟的詳細教程(親測有效) 2 安裝與創(chuàng)建默認(rèn)項目_水w的博客-CSDN博客 3、基于vscode開發(fā)vue項目的詳細步驟教程_水w的博客-CSDN博客 4、基于vscode開發(fā)vue項目的詳細步驟教程 2 第三方圖標(biāo)庫FontAwesome_水w的

    2024年02月02日
    瀏覽(53)
  • vue3:router安裝與使用

    vue3:router安裝與使用

    Terminal中運行以下代碼自動安裝 安裝完成后,在package.json中查看vue-router是否安裝成功 src目錄下新建一個router文件夾,在router文件夾里新建一個index.js文件,index.js中的代碼如下 main.js中代碼如下 在主頁面App.vue中的模板內(nèi)寫入一下兩行代碼即可 運行項目,打開運行地址,此時

    2023年04月19日
    瀏覽(16)
  • Vite4+Typescript+Vue3+Pinia 從零搭建(5) - 路由router

    Vite4+Typescript+Vue3+Pinia 從零搭建(5) - 路由router

    項目代碼同步至碼云 weiz-vue3-template Vue Router 是 Vue.js 的官方路由。它與 Vue.js 核心深度集成,讓用 Vue.js 構(gòu)建單頁應(yīng)用變得輕而易舉。 在 src/view 下新建 home.vue 和 login.vue ,內(nèi)容如下: login.vue 里修改下對應(yīng)name即可 index.ts 作為路由入口, static.ts 作為靜態(tài)路由, modules 內(nèi)還可以

    2024年02月05日
    瀏覽(100)
  • 【Vue3/Vue2】判斷設(shè)備是移動端還是pc端跳轉(zhuǎn)不同路由router

    【Vue3/Vue2】判斷設(shè)備是移動端還是pc端跳轉(zhuǎn)不同路由router

    ? ? ? APP文件中寫入js代碼 1、首先,通過 isMobile() 函數(shù)判斷用戶的設(shè)備類型。該函數(shù)使用正則表達式匹配 navigator.userAgent 字符串,以確定用戶是在移動設(shè)備上訪問網(wǎng)頁還是在桌面設(shè)備上訪問網(wǎng)頁 2、然后,在 onMounted() 鉤子函數(shù)中,根據(jù)當(dāng)前的路由路徑來判斷是否需要進行重定

    2024年01月16日
    瀏覽(43)
  • 一文詳解:Vue3中使用Vue Router

    Vue Router是一個官方的Vue.js路由管理器,它與 Vue.js 核心深度集成,通過它可以輕松地為單頁應(yīng)用程序(SPA)提供路由管理和導(dǎo)航功能。今天我們就來聊一聊Vue 3中使用Vue Router的那些事兒。 安裝Vue Router只需要在vue項目中打開終端,輸入如下命令即可安裝: npm 方式安裝 yarn方式

    2024年02月09日
    瀏覽(40)
  • vue3:22、vue-router的使用

    vue3:22、vue-router的使用

    ?

    2024年02月09日
    瀏覽(18)

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請作者喝杯咖啡吧~博客贊助

支付寶掃一掃領(lǐng)取紅包,優(yōu)惠每天領(lǐng)

二維碼1

領(lǐng)取紅包

二維碼2

領(lǐng)紅包