久久久久黄色录像,91午夜成人在线观看,日日亚洲精品

Vue 3.X 使用Vue Router 4.x 進(jìn)行路由配置，本文我們就來(lái)研究下如何使用Vue Router 4.x，本文中所有的使用方式都是使用 Composition API的方式。

本文通過(guò)一步步介紹Vue Router 4.x的使用，來(lái)搭建一個(gè)簡(jiǎn)單的博客系統(tǒng)，讓你對(duì)新版的Vue Router 4.x有一個(gè)完整的認(rèn)識(shí)，然后能夠非常輕松滴將Vue Router 4.x應(yīng)用在自己的項(xiàng)目中。

項(xiàng)目初始化

項(xiàng)目搭建

項(xiàng)目使用vite進(jìn)行創(chuàng)建。

npm init vite@latest vue-router-blog
npm install
npm run dev

目前安裝的是Vue 3.2.25

配置`vite.config.js`

我們配置@別名，這樣就比較方便書(shū)寫(xiě)引入文件的路徑

// 引入文件
const path = require("path");

export default defineConfig({
  // 添加 @
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
  plugins: [vue()],
});

配置`jsconfig.json`

jsconfig.json可以讓VSCode更加智能

{
  "include": [
    "./src/**/*",
  ],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

`Vue Router 4`初體驗(yàn)

安裝`Vue Router 4`

npm i vue-router@4

目前安裝的是Vue Router 4.0.12

創(chuàng)建兩個(gè)頁(yè)面`Home.vue`和`About.vue`

<!-- Home.vue -->
<template>
  <div>
    主頁(yè)
  </div>
</template>

<!-- About.vue -->
<template>
  <div>
    關(guān)于頁(yè)
  </div>
</template>

這兩個(gè)頁(yè)面很簡(jiǎn)單，每個(gè)頁(yè)面僅僅就是顯示一行文字

創(chuàng)建`router`

我們?cè)?strong>src目錄下新建router目錄，在router目錄下創(chuàng)建index.js文件, 在里面進(jìn)行路由的信息配置。

import { createRouter, createWebHistory } from "vue-router";

// 引入
import Home from "@/views/Home.vue";
import About from "@/views/About.vue";

// 路由信息
let routes = [
  {
    path: "/",
    name: 'home',
    component: Home,
  },
  {
    path: "/about",
    name: 'about',
    component: About,
  },
];

// 路由器
const router = createRouter({
  history: createWebHistory(), // HTML5模式
  routes,
});

export default router;

安裝`router`

將路由安裝router安裝到app上。

import { createApp } from 'vue'
import App from './App.vue'

// 引入插件
import router from "@/store/index";
// 安裝router插件
createApp(App).use(router).mount('#app')

使用 `router-link` 和 `router-view`

修改App.vue

<template>
  <img alt="Vue logo" src="./assets/logo.png" /><br />
  <div>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link><br />
  </div>
  <router-view></router-view>
</template>

至此，我們的就實(shí)現(xiàn)了頁(yè)面間的切換功能了。

basic

幾個(gè)重要的概念

`router-link`組件和`a`標(biāo)簽的區(qū)別?

router-link組件底層也是渲染的a標(biāo)簽，但是router-link的頁(yè)面切換只是更新了頁(yè)面的部分內(nèi)容，不會(huì)進(jìn)行整個(gè)頁(yè)面的刷新，而a標(biāo)簽跳轉(zhuǎn)(例如：<a href="/about">調(diào)到Home標(biāo)簽</a><br>)是對(duì)整個(gè)頁(yè)面進(jìn)行刷新。

底層原理是router-link劫持了元素的點(diǎn)擊事件，添加了處理頁(yè)面更新的邏輯。

`Hash`模式和`HTML5`模式的區(qū)別?

Hash模式的URL中有一個(gè)#號(hào)，eg：http://localhost:3000/#/about, #號(hào)后面的就是Hash地址，這個(gè)模式以前是SPA的常用模式，但是鏈接有一個(gè)#號(hào)比較丑。

HTML5模式和正常的鏈接地址一樣的，eg：http://localhost:3000/about, 這個(gè)地址很優(yōu)雅，但是有一個(gè)問(wèn)題，需要服務(wù)器支持。原因是瀏覽器中輸入http://localhost:3000/about支持，服務(wù)器以為要訪問(wèn)根路勁下的about目錄的HTML文件，而不是訪問(wèn)根路勁下的HTML文件。

webpack和vite啟動(dòng)的服務(wù)器是支持HTML5模式的，所以開(kāi)發(fā)環(huán)境使用HTML5模式?jīng)]有問(wèn)題。

`router-link`組件和`router-view`組件為什么能直接使用？

安裝router插件的時(shí)候注冊(cè)了這兩個(gè)全局組件，所以能直接使用。

install(app: App) {
    app.component('RouterLink', RouterLink)
    app.component('RouterView', RouterView)
}

路由懶加載

上面寫(xiě)法有一個(gè)嚴(yán)重的問(wèn)題，router中所有的組件都會(huì)被一次加載。我們的例子中就是 Home和About組件，即使有時(shí)候不會(huì)用到About組件, 也要加載，這對(duì)首頁(yè)的顯示會(huì)有很大的影響。

改造如下：

<!--// 刪除 import Home from "@/views/Home.vue";-->
<!--// 刪除 import About from "@/views/About.vue";-->

let routes = [
  {
    path: "/",
    name: 'home',
    <!--// 改成如下的寫(xiě)法-->
    component: () => import("@/views/Home.vue"),
  },
  {
    path: "/about",
    name: 'about',
    <!--// 改成如下的寫(xiě)法-->
    component: () => import("@/views/About.vue"),
  },
];

這樣在開(kāi)發(fā)環(huán)境中只有使用到組件才會(huì)加載進(jìn)來(lái)，在生產(chǎn)環(huán)境中異步組件會(huì)分開(kāi)文件進(jìn)行打包。

修改代碼(創(chuàng)建博客的框架)

為了方便介紹其他內(nèi)容，我們修改一下代碼內(nèi)容：

新建模擬博客列表數(shù)據(jù)

[
  {
    "id": 1,
    "catId": 1,
    "catName": "iOS",
    "subCatId": 1,
    "subcatName": "推薦",
    "name": "RxSwift實(shí)現(xiàn)MVVM架構(gòu)",
    "image": "https://images.xiaozhuanlan.com/photo/2018/2f5dff865155d756dfe04f2909cd1a36.png",
    "description": "在本文中，我將介紹iOS編程中的MVVM設(shè)計(jì)模式，當(dāng)然還有RxSwift的介紹。本文分為兩部分。在第1部分中簡(jiǎn)要介紹了RxSwift的設(shè)計(jì)模式和基礎(chǔ)知識(shí)，在第2部分中 ，我們有一個(gè)使用RxSwift的MVVM的示例項(xiàng)目。"
  },
  
  //省略...
]

命名為data.json將其放置在src文件夾下

創(chuàng)建路由信息

// 路由信息
let routes = [
  {
    path: "/",
    name: 'home',
    component: () => import("@/views/All.vue"),
  },
  {
    path: "/iOS",
    name: 'iOS',
    component: () => import("@/views/iOS.vue"),
  },
  {
    path: "/android",
    name: 'android',
    component: () => import("@/views/Android.vue"),
  },
  {
    path: "/flutter",
    name: 'flutter',
    component: () => import("@/views/Flutter.vue"),
  },
  {
    path: "/web",
    name: 'web',
    component: () => import("@/views/Web.vue"),
  },
];

設(shè)置5個(gè)路由：全部，iOS，Android，Flutter，Web。

頂部導(dǎo)航組件

<!-- TheNavigation.vue -->
<template>
  <div id="nav">
    <router-link to="/" class="nav-link">全部</router-link>
    <router-link to="/ios" class="nav-link">iOS</router-link>
    <router-link to="/android" class="nav-link">Android</router-link>
    <router-link to="/flutter" class="nav-link">Flutter</router-link>
    <router-link to="/web" class="nav-link">Web</router-link>
  </div>
</template>

TheNavigation導(dǎo)航組件中有5個(gè)router-link,分別切換到全部，iOS，Android，Flutter，Web。

5個(gè)頁(yè)面組件

<template>
  <div class="container">
    <!-- 博客列表 -->
    <div v-for="blog in arrs" class="item" :key="blog.id">
      <!-- 圖片 -->
      <img class="thumb" :src="blog.image" />
      <!-- 信息 -->
      <div class="info">
        <div class="title">{{ blog.name }}</div>
        <div class="message"> {{ blog.description }} </div>
      </div>
    </div>
  </div>
</template>

<script setup>

// 數(shù)據(jù)
import sourceData from "@/data.json";
let arrs = sourceData;

</script>

APP.vue

<script setup>
import TheNavigation from "@/components/TheNavigation.vue";
</script>

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

至此，博客框架就完成了，實(shí)現(xiàn)了5個(gè)博客分類，效果如下圖：

博客分類

設(shè)置`linkActiveClass`

路由器可以設(shè)置router-link激活的類：

const router = createRouter({
  history: createWebHistory(),
  routes,
  <!--// 添加激活的類-->
  linkActiveClass: "blog-active-link"
});

然后設(shè)置樣式:

#nav .blog-active-link  {
  color: red;
  border-bottom: 2px solid red;
}

linkActiveClass

命名路由

我們?cè)陧敳繉?dǎo)航組件使用的跳轉(zhuǎn)都是路徑跳轉(zhuǎn)例如:to="/", 我們可以給路由設(shè)置一個(gè)名稱name，這樣可以通過(guò)路由的名稱name進(jìn)行跳轉(zhuǎn)。

<template>
  <div id="nav">
    <router-link to="/" class="nav-link">全部</router-link>
    <!-- 修改 to 屬性為 name -->
    <router-link :to="{name: 'ios'}" class="nav-link">iOS</router-link>
    <router-link :to="{name: 'android'}" class="nav-link">Android</router-link>
    <router-link :to="{name: 'flutter'}" class="nav-link">Flutter</router-link>
    <router-link :to="{name: 'web'}" class="nav-link">Web</router-link>
  </div>
</template>

路由的`query`

前面提到的5個(gè)博客分類是固定的，我們點(diǎn)擊博客列表的每條數(shù)據(jù)進(jìn)入博客詳情，此時(shí)由于不同的博客內(nèi)容是不同的，所以不能固定寫(xiě)死。實(shí)現(xiàn)方法一是通過(guò)路由傳參實(shí)現(xiàn)。

添加博客詳情的路由

let routes = [
  //...
  {
    path: '/blogdetail',
    name: "blogdetail",
    component: () => import("@/views/BlogDetail.vue")
  }
];

`query`傳參

<template>
  <div class="container">
    <!-- 傳參 -->
    <router-link v-for="blog in arrs" class="item" :key="blog.id" :to="{ name: 'blogdetail', query: { id: blog.id } }">
      // 省略
    </router-link>
  </div>
</template>

設(shè)置query: { id: blog.id } }給路由傳參

接收`query`傳參

<template>
  <div class="container">
    <h2>{{ blog.name }}</h2>
    <p>{{ blog.description }}</p>
  </div>
</template>

<script>
import sourceData from "@/data.json";
import { useRoute } from "vue-router";
export default {
  setup(props) {
    // 獲取路由
    let route = useRoute();
    // 獲取query參數(shù)
    let blogId = route.query.id;

    return {
      blog: sourceData.find((blog) => blog.id == blogId),
    };
  },
};
</script>

通過(guò)route.query.id就能獲取到傳遞的博客id, 然后就能顯示對(duì)應(yīng)的博客信息了。

query

動(dòng)態(tài)路由

博客詳情的頁(yè)面邏輯，也可以用動(dòng)態(tài)路由去實(shí)現(xiàn)。

修改博客詳情的路由

<!-- router.js -->
let routes = [
  //...
  {
    <!-- 動(dòng)態(tài)路由路徑 -->
    path: '/blogdetail/:id',
    name: "blogdetail",
    component: () => import("@/views/BlogDetail.vue")
  }
];

:id 表示路由的路徑是動(dòng)態(tài)的，路徑最后表示博客id.

傳參

<template>
  <div class="container">
    <!-- 傳參 -->
    <router-link v-for="blog in arrs" class="item" :key="blog.id" :to="{ name: 'blogdetail', params: { id: blog.id } }">
      // 省略
    </router-link>
  </div>
</template>

設(shè)置params: { id: blog.id } }給動(dòng)態(tài)路由傳參

接收參數(shù)

let blogId = route.params.id;

通過(guò)route.params.id就能獲取到傳遞的博客id, 然后就能顯示對(duì)應(yīng)的博客信息了。

重命名路由

知道了動(dòng)態(tài)路由的邏輯后，我們當(dāng)然可以把iOS, Android, Flutter, Web四個(gè)頁(yè)面合并為一個(gè)頁(yè)面。

合并`router`

<!-- router.js -->
let routes = [
  {
    path: "/",
    name: 'home',
    component: () => import("@/views/All.vue"),
  },
  <!-- 將/ios,/android,/flutter,/web四個(gè)合并為/category/:catId -->
  {
    path: "/category/:catId",
    name: 'category',
    component: () => import("@/views/All.vue"),
  },
  {
    path: '/blogdetail/:id',
    name: "blogdetail",
    component: () => import("@/views/BlogDetail.vue")
  }
];

修改導(dǎo)航

<template>
  <div id="nav">
    <router-link to="/" class="nav-link">全部</router-link>
    <!-- 動(dòng)態(tài)路由 -->
    <router-link :to="{name: 'category', params: { catId: 1 }}" class="nav-link">iOS</router-link>
    <router-link :to="{name: 'category', params: { catId: 2 }}" class="nav-link">Android</router-link>
    <router-link :to="{name: 'category', params: { catId: 3 }}" class="nav-link">Flutter</router-link>
    <router-link :to="{name: 'category', params: { catId: 4 }}" class="nav-link">Web</router-link>
  </div>
</template>

列表

<script setup>
import { useRoute } from 'vue-router';

// 獲取路由
let route = useRoute();
// 獲取params參數(shù)
let catId = route.params.catId;

// 數(shù)據(jù)
import sourceData from "@/data.json";
let arrs = sourceData.filter((blog) => blog.catId == catId);

</script>

這樣我就可以把iOS.vue,Android.vue,Flutter.vue,Web.vue四個(gè)組件文件刪除了。

你應(yīng)該有個(gè)疑問(wèn)，home路由的內(nèi)容其實(shí)和category路由的內(nèi)容也是一樣的，是否可以合并呢？

重命名"/"

可以將"/"重命名為'/category/0'，這樣所有的5個(gè)路由都將訪問(wèn)"/category/:catId"這個(gè)路由了。

<!-- router.js -->
let routes = [
  {
    path: "/",
    <!-- 重命名 -->
    redirect: '/category/0'
  },
  {
    path: "/category/:catId",
    name: 'category',
    component: () => import("@/views/All.vue"),
  },
  {
    path: '/blogdetail/:id',
    name: "blogdetail",
    component: () => import("@/views/BlogDetail.vue")
  }
];

import sourceData from "@/data.json";
let arrs = catId != '0' ? sourceData.filter((blog) => blog.catId == catId) : sourceData;

判斷下，如果catId != '0'為分類篩選，否則就是顯示全部

監(jiān)聽(tīng)路由變化

此時(shí)的代碼出現(xiàn)了問(wèn)題，點(diǎn)擊頂部的導(dǎo)航切換不同的分類，底下的列表將不會(huì)變化。這是因?yàn)榻M件復(fù)用了。此時(shí)需要監(jiān)聽(tīng)組件的路由的變化，切換數(shù)據(jù)。

路由

可以通過(guò)watch函數(shù)監(jiān)聽(tīng)route.params, 當(dāng)路由變化后，就可以重新獲取數(shù)據(jù)。

<!-- All.vue -->
<script setup>
import { ref } from '@vue/reactivity';
import { useRoute } from 'vue-router';
import sourceData from "@/data.json";
import { watch } from '@vue/runtime-core';

let arrs = ref([]);

let route = useRoute();
let params = route.params;

let initData = (catId) => {
  arrs.value = catId != '0' ? sourceData.filter((blog) => blog.catId == catId) : sourceData;
}

// 初始化的時(shí)候獲取數(shù)據(jù)
initData(params.catId);

// 監(jiān)聽(tīng)paramas，更新數(shù)據(jù)
watch(() => route.params.catId, (value) => {
  initData(value);
})

</script>

禁止路由復(fù)用

解決上節(jié)問(wèn)題，還有一個(gè)更簡(jiǎn)單的方法，就是禁止路由的復(fù)用。

<template>
  <TheNavigation />
  <!-- 禁止路由復(fù)用 -->
  <router-view :key="$route.path"></router-view>
</template>

通過(guò)這個(gè)方法，動(dòng)態(tài)組件將不會(huì)復(fù)用，直接卸載舊組件，掛載新組件。所以性能上有丟丟的損耗。

給組件傳遞`props`

我們前面在組件中需要使用useRoute獲取到路由，然后獲取對(duì)應(yīng)的route.params, 我們可以通過(guò)另外一種方式獲取route.params。

路由添加`props`屬性

<!-- router.js -->
{
    path: "/category/:catId",
    name: 'category',
    component: () => import("@/views/All.vue"),
    <!-- 路由添加`props`屬性 -->
    props: true,
}

組件中獲取`props`屬性

<script setup>
import { ref } from '@vue/reactivity';
import { useRoute } from 'vue-router';
import sourceData from "@/data.json";

// 定義props
const props = defineProps({
  catId: {
    type: String,
    required: true,
  }
})

let arrs = props.catId != '0' ? sourceData.filter((blog) => blog.catId == props.catId) : sourceData;

</script>

組件中可以直接獲取到catId參數(shù)，個(gè)人認(rèn)為這種寫(xiě)法更優(yōu)美。

路由`props`屬性支持函數(shù)

<!-- router.js -->
{
    path: "/category/:catId",
    name: 'category',
    component: () => import("@/views/All.vue"),
    props: route => ({ catId: parseInt(route.params.catId) }) ,
}

函數(shù)中，可以對(duì)參數(shù)進(jìn)行處理，我們的例子中是將catId從字符串變成了數(shù)字

// 定義props
const props = defineProps({
  catId: {
    type: Number,
    required: true,
  }
})

let arrs = props.catId !== 0 ? sourceData.filter((blog) => blog.catId === props.catId) : sourceData;

props catId的定義和使用也要進(jìn)行相應(yīng)的修改

編程式導(dǎo)航

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

例如：可以在詳情頁(yè)加一個(gè)按鈕，點(diǎn)擊返回上一個(gè)頁(yè)面

<button @click="$router.back()">返回</button>

轉(zhuǎn)場(chǎng)動(dòng)畫(huà)

Vue Router4 的轉(zhuǎn)場(chǎng)動(dòng)畫(huà)的實(shí)現(xiàn) 和以前的版本有些不一致。需要將transition 包含在router-view，如下所示：

  <router-view v-slot="{ Component }">
    <transition name="fade" mode="out-in">
      <component :is="Component" :key="$route.path" />
    </transition>
  </router-view>

加上對(duì)應(yīng)的css樣式

/* fade 模式 name="fade" mode="out-in" */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

這樣切換就有淡入淡出的效果了。效果自定義，很方便。

路由未匹配上

有時(shí)候用戶可能輸入一個(gè)根本不存在的路勁(例如：http://localhost:3000/categorys)，此時(shí)最好是給顯示個(gè)默認(rèn)的404頁(yè)面，這樣用戶體驗(yàn)更好。

404頁(yè)面

定義路由

<!-- router.js -->
{
    path: '/:pathMatch(.*)*',
    name: "NotFound",
    component: () => import("@/views/404.vue"),
}

注意，這個(gè)路由一定要放在最后，否則就有問(wèn)題了。

404頁(yè)面

<template>
  <div class="container">
    <h2>未找到頁(yè)面</h2>
  <router-link to="/">回到首頁(yè)</router-link>
  </div>
</template>

這個(gè)頁(yè)面內(nèi)容隨意

路由守衛(wèi)

路由獨(dú)享的守衛(wèi)

想象下用戶瀏覽器地址欄輸入http://localhost:3000/category/6, 其實(shí)也會(huì)出現(xiàn)一些問(wèn)題，因?yàn)椴淮嬖谶@個(gè)分類。這時(shí)候需要進(jìn)行處理, 當(dāng)分類不存在的時(shí)候跳轉(zhuǎn)到404頁(yè)面。

<!-- router.js -->
  {
    path: "/category/:catId",
    name: 'category',
    component: () => import("@/views/All.vue"),
    props: route => ({ catId: parseInt(route.params.catId) }),
    <!-- 添加路由守衛(wèi) -->
    beforeEnter: (to, from) => {
      // 如果不是正確的分類，跳轉(zhuǎn)到NotFound的頁(yè)面
      console.log(to.params.catId);
      if (!["0", "1", "2", "3", "4"].includes(to.params.catId)) { 
        return {
          name: "NotFound",
          // 這個(gè)是在地址欄保留輸入的信息，否則地址欄會(huì)非常的丑
          params: { pathMatch: to.path.split("/").slice(1) },
          query: to.query,
          hash: to.hash,
        };
      }
    }
  },

判斷如果不是正確的分類，跳轉(zhuǎn)到NotFound的頁(yè)面

路由全局守衛(wèi)

在某些路由中需要一些特定的操作，譬如訪問(wèn)前必須是登錄用戶。這時(shí)候可以通過(guò)使用meta屬性和全局守衛(wèi)來(lái)實(shí)現(xiàn)。

譬如有一個(gè)課程專欄我們?cè)O(shè)置為需要用戶登錄才能訪問(wèn)。我們可以如下設(shè)置

<!-- router.js -->
  {
    path: '/course',
    name: "course",
    component: () => import("@/views/Course.vue"),
    <!-- 需要登錄 -->
    meta: {needLogin: true}
  },
  {
    path: '/login',
    name: "login",
    component: () => import("@/views/Login.vue"),
  },

添加一個(gè)全局守衛(wèi), 需要登錄但是沒(méi)有登錄的情況下就跳轉(zhuǎn)到登錄頁(yè)面

<!-- router.js -->
// 全局守衛(wèi)
router.beforeEach((to, from) => {
  if (to.meta.needLogin && !userLogin) {
    // need to login
    return { name: "login" };
  }
});

組件內(nèi)的路由守衛(wèi)

前面的切換分類的章節(jié)的問(wèn)題其實(shí)還有第三種解決方案，就是用組件內(nèi)的路由守衛(wèi)。

<script setup>
import { ref } from '@vue/reactivity';
import { useRoute, onBeforeRouteUpdate } from 'vue-router';
import sourceData from "@/data.json";

// 定義props
const props = defineProps({
  catId: {
    type: Number,
    required: true,
  }
})

let arrs = ref([]);

let fetchData = (id) => {
  return id !== 0 ? sourceData.filter((blog) => blog.catId == id) : sourceData;
}

<!-- 組件內(nèi)的路由守衛(wèi) -->
onBeforeRouteUpdate((to, from, next) => {
  arrs.value = fetchData(to.params.catId)
});

arrs.value = fetchData(props.catId);

</script>

對(duì)于一個(gè)帶有動(dòng)態(tài)參數(shù)的路徑 /category/:catId，在 /category/1 和 /category/2 之間跳轉(zhuǎn)的時(shí)候, 會(huì)觸發(fā)onBeforeRouteUpdate的路由鉤子函數(shù)，在鉤子函數(shù)中可以進(jìn)行數(shù)據(jù)的更新。

擴(kuò)展 RouterLink

router-link可以實(shí)現(xiàn)路由的跳轉(zhuǎn)，此外為了更加豐富功能，可以對(duì)其進(jìn)行擴(kuò)展。譬如我們可以擴(kuò)展實(shí)現(xiàn)能夠跳轉(zhuǎn)到外部鏈接。

<!--AppLink.vue-->
<template>
  <!-- 如果是外部鏈接，跳轉(zhuǎn)（<slot />表示router-link組件中的slot內(nèi)容）  -->
  <a v-if="isExternal" :href="to"><slot /></a>
  <!-- 如果是APP內(nèi)的鏈接，路由跳轉(zhuǎn) （<slot />表示router-link組件中的slot內(nèi)容） -->
  <router-link v-else v-bind="$props"><slot /></router-link>
</template>

<script>
import { computed, defineComponent } from "@vue/runtime-core";
import { RouterLink } from "vue-router";

export default {
  props: {
    // 繼承RouterLink的props
    ...RouterLink.props,
  },
  setup(props) {
    
    // 如果`to`屬性值是字符串類型，并且以`http`開(kāi)頭，我們認(rèn)為它是外部鏈接
    let isExternal = computed(() => typeof props.to === 'string' && props.to.startsWith('http'));

    return {
      isExternal
    }
  }
};
</script>

使用：

<AppLink to="https://www.domain.cn" />

總結(jié)

Vue Router 4.x 的使用基本上介紹完了，最重要的特性是能和Composition API的搭配使用，此外使用上也還是有一些不小的變化。

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

Vue Router 4 的使用，一篇文章給你講透徹

項(xiàng)目初始化

項(xiàng)目搭建

配置vite.config.js

配置jsconfig.json

Vue Router 4初體驗(yàn)

安裝Vue Router 4

創(chuàng)建兩個(gè)頁(yè)面Home.vue和About.vue

創(chuàng)建router

安裝router

使用 router-link 和 router-view

幾個(gè)重要的概念

router-link組件和a標(biāo)簽的區(qū)別?

Hash模式和HTML5模式的區(qū)別?

router-link組件和router-view組件為什么能直接使用？

路由懶加載

修改代碼(創(chuàng)建博客的框架)

新建模擬博客列表數(shù)據(jù)

創(chuàng)建路由信息

頂部導(dǎo)航組件

5個(gè)頁(yè)面組件

APP.vue

設(shè)置linkActiveClass

命名路由

路由的query

添加博客詳情的路由

query傳參

接收query傳參

動(dòng)態(tài)路由

修改博客詳情的路由

傳參

接收參數(shù)

重命名路由

合并router

修改導(dǎo)航

列表

重命名"/"

監(jiān)聽(tīng)路由變化

禁止路由復(fù)用

給組件傳遞props

路由添加props屬性

組件中獲取props屬性

路由props屬性支持函數(shù)

編程式導(dǎo)航

轉(zhuǎn)場(chǎng)動(dòng)畫(huà)

路由未匹配上

404頁(yè)面

定義路由

404頁(yè)面

路由守衛(wèi)

路由獨(dú)享的守衛(wèi)

路由全局守衛(wèi)

組件內(nèi)的路由守衛(wèi)

擴(kuò)展 RouterLink

總結(jié)

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

Vue Router 4 的使用，一篇文章給你講透徹

配置`vite.config.js`

配置`jsconfig.json`

`Vue Router 4`初體驗(yàn)

安裝`Vue Router 4`

創(chuàng)建兩個(gè)頁(yè)面`Home.vue`和`About.vue`

創(chuàng)建`router`

安裝`router`

使用 `router-link` 和 `router-view`

`router-link`組件和`a`標(biāo)簽的區(qū)別?

`Hash`模式和`HTML5`模式的區(qū)別?

`router-link`組件和`router-view`組件為什么能直接使用？

設(shè)置`linkActiveClass`

路由的`query`

`query`傳參

接收`query`傳參

合并`router`

給組件傳遞`props`

路由添加`props`屬性

組件中獲取`props`屬性

路由`props`屬性支持函數(shù)