vue路由笔记

路由

1. 安装

执行如下命令来安装

npm install vue-router@4

2. 入门

用 Vue + Vue Router 创建单页应用非常简单：通过 Vue.js，我们已经用组件组成了我们的应用。当加入 Vue Router 时，我们需要做的就是将我们的组件映射到路由上，让 Vue Router 知道在哪里渲染它们。下面是一个基本的例子：

2.1 根组件

<template>
    <button @click="showLoading">切换</button>
    <h3>根组件</h3>
</template>

2.2 创建组件

我们以登录和注册组件为例来演示路由的使用。我们在 components 目录下新建 Login.vue 和 Register.vue 两个组件
Login.vue

<template>
    <h3>Login</h3>
</template>
<script setup lang="ts">
</script>

Register.vue

<template>
    <h3>Register</h3>
</template>
<script setup lang="ts">
</script>

2.3 编写路由

我们在 src 目录下新建一个叫 router 的目录，然后在这个目录下新建一个 index.ts 文件。

import {createRouter, createWebHashHistory, RouteRecordRaw} from "vue-router";

// 配置路由映射
const routes: Array<RouteRecordRaw> = [
    {
        path: '/', // 指定请求的路径
        component: () => import('../components/Login.vue')
    },
    {
        path: '/register',
        component: () => import('../components/Register.vue')
    }
]

// 创建路由对象
const router = createRouter({
    history: createWebHashHistory(), // 历史记录
    routes // 路由的映射
})

// 导出路由，便于挂载
export default router

2.4 挂载路由

我们需要在 main.ts 入口文件中通过 use() 方法来进行挂载

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

// 引入
import loading from './loading'

import router from './router'

// 注册插件
createApp(App).use(router).use(loading).mount('#app')

2.5 使用路由

我们在根组件中来使用路由，需要使用 <router-view></router-view> 来进行路由的展示。
现在我们可以看到登录的组件了，但是我们还希望有一个链接可以随时切换。这时就需要使用 <router-linke></router-linke> 标签来指定链接。

<template>
    <button @click="showLoading">切换</button>
    <h3>根组件</h3>
    <router-link to="/">登录</router-link>
    <router-link to="/register">注册</router-link>
    <router-view></router-view>
</template>

router-link 标签中有一个必须的属性叫 to，它是用于指定链接的跳转路径，它的值与路由配置中的 path 属性的值相同。

2.6 route 和 router 的区别

route 是一个对象，它表示当前路由信息，包括当前 URL 解析得到的信息，如：当前路径、请求参数、query对象等。
router 也是一个对象，它表示全局的路由实例，是路由的构造方法的实例。它包括向路由中添加路由地址、命名路由等。

3. 路由模式

3.1 hash模式

默认情况下，Vue 中使用的路由是 HashHistory 方式，这种方式会在浏览器地址栏中以 #/ 的方式来显示。它其实使用的是 location.hash 的方式。

3.2 history模式

history 提供了 pushState 和 replaceState 两个方法，这两个方法改变 URL 的 path 部分不会引起页面刷新。
history 提供了类似 hashchange 事件的 popstate 事件，但 popstate 事件有些不同：

1. 通过浏览器前进后退改变 URL 时会触发 popstate 事件
2. 通过 pushState/replaceState 或 <a> 标签改变 URL 不会触发 popstate 事件
3. 可以拦截 pushState/replaceState 的调用和 <a> 标签的点击事件来检测 URL 变化
4. 通过 JS 调用 history 的 back、go 和 forward 方法触发该事件

4. 命名路由

4.1 介绍

除了可以使用 path 来指定路由地址外，还可以使用 name 来指定。它有以下几个优点：

• 没有硬编码的 URL
• params 的自动编码/解码。
• 防止你在 url 中出现打字错误。
• 绕过路径排序（如显示一个）

4.2 使用

要想使用命令路由，我们只需要在路由配置文件中的映射部分添加 name 属性，并指定名称即可。

const routes: Array<RouteRecordRaw> = [
    {
        path: '/', // 指定请求的路径
        name: 'login',
        component: () => import('../components/Login.vue')
    },
    {
        path: '/register',
        name: 'register',
        component: () => import('../components/Register.vue')
    }
]

然后在 <router-link to=""></router-link> 标签中的 to 属性来以对象的方式使用 name 属性。

<template>
    <button @click="showLoading">切换</button>
    <h3>根组件</h3>
    <router-link :to="{name: 'login'}">登录</router-link>
    <router-link :to="{name: 'register'}">注册</router-link>
    <router-view></router-view>
</template>

注意：使用命名路由时，to 属性需要进行 v-bind 绑定，才能够识别对象中的 name 属性。

5. 编程式导航

除了使用 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。

5.1 字符串模式

我们在 App.uve 中使用这种模式来进行演示。

<template>
    <button @click="toPage('/')">登录</button>
    <button @click="toPage('/register')">注册</button>
    <router-view></router-view>
</template>

<script setup lang="ts">
import {useRouter} from 'vue-router'

const router = useRouter()
const toPage = (url: string) => {
    router.push(url)
}
</script>

5.2 对象模式

我们还可以给 push() 方法指定一个对象。例如：

const router = useRouter()
const toPage = (url: string) => {
    router.push({ // 对象模式
        path: url
    })
}

5.3 命名路由模式

除了上面二种方式外，我们还可以使用命名路由模式。
首先我们需要修改 <router-link> 标签中的 to 属性，让的地址变为路由配置中的 name 属性的值。

<template>
    <button @click="toPage('login')">登录</button>
    <button @click="toPage('register')">注册</button>
    <router-view></router-view>
</template>

然后修改 push() 方法中对象中的属性为 name：

const router = useRouter()
const toPage = (url: string) => {
    // 命名路由模式
    router.push({
        name: url
    })
}

如果 path 和 name 属性都同时指定，那么优先使用的是 name 属性。也就是说，优先使用命名路由模式。

5.4 替换当前位置

当不希望保留历史记录时，可以采用 replace 进行页面的跳转，同时也会创建渲染新的 Vue 组件，但是在 history 中其不会重复保存记录，而是替换原有的 vue 组件：

5.4.1 router-link

<template>
    <router-link replace to="/">登录</router-link>
    <router-link replace to="/register">注册</router-link>
    <router-view></router-view>
</template>

5.4.2 编程式导航

const toPage = (url: string) => {
    router.replace(url)
}

5.4.3 横跨历史

该方法采用一个整数作为参数，表示在历史堆栈中前进或后退多少步，类似于 window.history.go(n)。
为了演示这个效果，我们先修改 App.vue 中的 template 部分：

<template>
    <button @click="showLoading">切换</button>
    <h3>根组件</h3>
    <router-link to="/">登录</router-link>
    <router-link to="/register">注册</router-link>

    <button @click="next">前进</button>
    <button @click="prev">后退</button>
</template>

然后在实现功能：

const router = useRouter()

const next = () => {
    router.go(1)
}
const prev = () => {
    router.back()
}