Vue教程(路由router-基本使用)

文開始我們來給大家介紹在Vue中非常重要的一個內容，就是路由Router

什么是路由

后端路由：對于普通的網站，所有的超鏈接都是URL地址，所有的URL地址都對應服務器上對應的資源；

前端路由：對于單頁面應用程序來說，主要通過URL中的hash(#號)來實現不同頁面之間的切換，同時，hash有一個特點：HTTP請求中不會包含hash相關的內容；所以，單頁面程序中的頁面跳轉主要用hash實現；

在單頁面應用程序中，這種通過hash改變來切換頁面的方式，稱作前端路由（區別于后端路由）；

Vue路由基本使用

1. 基本使用

我們先來看看路由的基本使用，基礎頁面如下

1.1 引入vue-router

我們需要引入vue-router.js文件，而且必須是在vue.js文件之后引入

1.2 創建組件模板

創建兩個組件模板對象，如下

1.3 VueRouter實例

當導入 vue-router 包之后，在 window 全局對象中，就有了一個路由的構造函數叫做 VueRouter,在 new 路由對象的時候，可以為構造函數，傳遞一個配置對象。在配置對象中我們可以來創建我們的路由規則

1.4 vm實例綁定

創建的VueRouter對象我們還需要綁定到Vue實例中才有效果

1.5 router-view

我們想要使用router路由，那么我們通過router-view標簽來占位我們要顯示的內容的位置

router-view標簽是 vue-router 提供的元素，專門用來當作占位符的，將來，路由規則，匹配到的組件，就會展示到這個 router-view 中去。所以：我們可以把 router-view 認為是一個占位符。

1.6 訪問

通過上面的演示我們可以通過修改 #/后的內容來觸發路由中的規則，這時我們可以在頁面中添加對應的操作按鈕來便捷觸發。

2. 重定向

上面的案例我們實現了路由的基本使用，但是頁面第一次打開的時候，是沒有路由規則的，這時我們可以配置一個，如下

效果

有實現，但是地址顯示的是“/”,我們希望地址和路由的結果是一致的，這時我們可以設置個重定向來處理。

3. router-link

我們可以用router-link標簽來替換掉 a標簽，這樣會更靈活些，如下

我們發現router-link渲染的最終的標簽也是 a 標簽，我們可以通過 router-link中的 tag屬性來修改渲染的標簽類型

4. 高亮處理

有時候我們需要給被選中的標簽設置特殊的樣式，這時怎么辦呢？看下面的動圖。

通過演示我們發現，當對應的標簽被選中的時候會動態給標簽添加 class屬性:

router-link-active,那么我們就可以利用這屬性了

實現了我們需要的效果，注意在VueRouter實例中有個屬性叫 linkActiveClass 可以設置我們特定的 class 值。

效果

5. 動畫效果

?最后我們可以將前面講過的動畫運用到組件切換上。如下

最終效果如下

————————————————

原文鏈接：https://blog.csdn.net/qq_38526573/article/details/98354108

?本文開始我們來給大家介紹在Vue中非常重要的一個內容，就是路由Router

什么是路由

后端路由：對于普通的網站，所有的超鏈接都是URL地址，所有的URL地址都對應服務器上對應的資源；
前端路由：對于單頁面應用程序來說，主要通過URL中的hash(#號)來實現不同頁面之間的切換，同時，hash有一個特點：HTTP請求中不會包含hash相關的內容；所以，單頁面程序中的頁面跳轉主要用hash實現；
在單頁面應用程序中，這種通過hash改變來切換頁面的方式，稱作前端路由（區別于后端路由）；

Vue路由基本使用

1. 基本使用

??我們先來看看路由的基本使用，基礎頁面如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
    <div id="app">

    </div>

    <script>
        var vm = new Vue({
            el: "#app",
            data: {},
            methods: {}
        })
    </script>
</body>
</html>

1.1 引入vue-router

??我們需要引入vue-router.js文件，而且必須是在vue.js文件之后引入

在這里插入圖片描述

1.2 創建組件模板

??創建兩個組件模板對象，如下

在這里插入圖片描述

1.3 VueRouter實例

??當導入 vue-router 包之后，在 window 全局對象中，就有了一個路由的構造函數叫做 VueRouter,在 new 路由對象的時候，可以為構造函數，傳遞一個配置對象。在配置對象中我們可以來創建我們的路由規則

在這里插入圖片描述

1.4 vm實例綁定

??創建的VueRouter對象我們還需要綁定到Vue實例中才有效果

在這里插入圖片描述

1.5 router-view

??我們想要使用router路由，那么我們通過router-view標簽來占位我們要顯示的內容的位置

在這里插入圖片描述

??router-view標簽是 vue-router 提供的元素，專門用來當作占位符的，將來，路由規則，匹配到的組件，就會展示到這個 router-view 中去。所以：我們可以把 router-view 認為是一個占位符。 1.6 訪問

在這里插入圖片描述

??通過上面的演示我們可以通過修改 #/后的內容來觸發路由中的規則，這時我們可以在頁面中添加對應的操作按鈕來便捷觸發。

在這里插入圖片描述

2. 重定向

??上面的案例我們實現了路由的基本使用，但是頁面第一次打開的時候，是沒有路由規則的，這時我們可以配置一個，如下

在這里插入圖片描述

效果

在這里插入圖片描述

有實現，但是地址顯示的是“/”,我們希望地址和路由的結果是一致的，這時我們可以設置個重定向來處理。

在這里插入圖片描述

3. router-link

??我們可以用router-link標簽來替換掉 a標簽，這樣會更靈活些，如下

在這里插入圖片描述

我們發現router-link渲染的最終的標簽也是 a 標簽，我們可以通過 router-link中的 tag屬性來修改渲染的標簽類型

在這里插入圖片描述

4. 高亮處理

??有時候我們需要給被選中的標簽設置特殊的樣式，這時怎么辦呢？看下面的動圖。

在這里插入圖片描述

通過演示我們發現，當對應的標簽被選中的時候會動態給標簽添加 class屬性:
router-link-active,那么我們就可以利用這屬性了

在這里插入圖片描述

實現了我們需要的效果，注意在VueRouter實例中有個屬性叫 linkActiveClass 可以設置我們特定的 class 值。

在這里插入圖片描述

效果

在這里插入圖片描述

搞定

5. 動畫效果

??最后我們可以將前面講過的動畫運用到組件切換上。如下

在這里插入圖片描述

最終效果如下

在這里插入圖片描述

完整代碼

一定離不開 Vue Router 來管理你的應用路由。

而 router-link 組件就是 Vue Router 提供給我們的秘密武器，它可以讓你輕松實現頁面跳轉，并擁有豐富的功能和靈活的配置。

今天，我們就來深入了解一下 router-link 的用法和奧秘！

1. 基礎用法：

router-link 組件接受一個 to 屬性，用于指定跳轉的目標路由路徑。簡單來說，你只需要將 router-link 組件包裹在需要跳轉的鏈接文本或元素上，就可以實現頁面跳轉了。

示例代碼：

html

<template>
  <div>
    <router-link to="/">首頁</router-link>
    <router-link to="/about">關于我們</router-link>
  </div>
</template>

<script>
export default {
  // ...
};
</script>

2. 鏈接文本和元素：

默認情況下，router-link 組件會將 to 屬性的值作為鏈接文本。可以使用 router-link 組件的 tag 屬性指定其他元素標簽，例如 a、button 等。

示例代碼：

html

<template>
  <div>
    <!-- 使用 a 標簽 -->
    <router-link to="/" tag="a">首頁</router-link>
    <!-- 使用 button 標簽 -->
    <router-link to="/about" tag="button">關于我們</router-link>
  </div>
</template>

3. 傳遞參數：

router-link 組件支持傳遞參數，可以通過 params 或 query 屬性進行傳遞。

示例代碼：

html

<template>
  <div>
    <!-- 使用 params 傳遞參數 -->
    <router-link :to="{ name: 'user', params: { id: 1 } }">用戶詳情</router-link>
    <!-- 使用 query 傳遞參數 -->
    <router-link :to="{ path: '/search', query: { keyword: 'vue' } }">搜索</router-link>
  </div>
</template>

4. 自定義激活樣式：

router-link 組件提供了 active-class 屬性，用于自定義當前激活路由的樣式。

示例代碼：

html

<template>
  <div>
    <router-link to="/" active-class="active">首頁</router-link>
  </div>
</template>

<style scoped>
.active {
  color: red;
}
</style>

5. router-link 組件的解析：

router-link 組件最終會被渲染成一個 <a> 標簽，并使用 Vue Router 的路由匹配邏輯來處理點擊事件。

源碼解析：

javascript

// router-link.js
import { h } from 'vue';

export default {
  name: 'RouterLink',
  props: {
    to: {
      type: [String, Object],
      required: true
    }
  },
  setup(props, { attrs }) {
    const { href, target, rel, onClick } = attrs;
    const resolved = resolveComponent(props.to);
    const active = isActive(resolved.path, props.to);
    
    return () => h('a', {
      href: href || resolved.href,
      target: target,
      rel: rel,
      onClick: (e) => onClick && onClick(e),
      onMousedown: () => handleLink(resolved),
    }, [props.children]);
  }
};

希望這篇文章能幫助你更好地了解和使用 router-link 組件，讓你的 Vue Router 路由管理更加高效便捷！

歡迎在評論區分享你的經驗和困惑，一起探討學習，共同進步！

#Java后端需要學習哪些技術#

在線咨詢

上一篇：「CSS」 Position 用法進階01：匹配父級容器空間
下一篇：Word如何轉換為HTML？Word轉HTML具體操作步驟

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

Vue教程(路由router-基本使用)

什么是路由

1.1 引入vue-router

1.6 訪問

2. 重定向

3. router-link

4. 高亮處理

5. 動畫效果

什么是路由

Vue路由基本使用

1. 基本使用

1.1 引入vue-router

1.2 創建組件模板

1.3 VueRouter實例

1.4 vm實例綁定

1.5 router-view

2. 重定向

3. router-link

4. 高亮處理

5. 動畫效果

您的項目需求