vue3.x学习笔记之项目实战 -- 路由配置

• 路由

• 路由官网

• 安装Vue Router
• 创建路由实例

• 路由规则
• 高级的路由管理

• 路由模式:hash 和 history
• 承载路由 <router-view>
• 集成路由 — 注意use要在mount之前
• 跳转路由

• 使用 <router-link> 标签
• 使用 useRouter 方法

• push 与 replace

• 后退、前进: back 和 forward

• go

路由

路由官网

• https://router.vuejs.org/zh/introduction.html
• https://github.com/vuejs/router

安装Vue Router

官网地址：https://router.vuejs.org/zh/installation.html

# npm
 
npm install vue-router@4

# yarn
 
yarn add vue-router@4

创建路由实例

创建一个路由实例并定义路由规则。路由规则是一个对象数组，其中每个对象都定义了一个路由的路径和组件。

例如，以下代码定义了两个路由规则：

import { createRouter, createWebHistory } from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

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

export default router;

在这个例子中，我们导入了createRouter和createWebHistory函数。

createRouter函数用于创建路由实例，createWebHistory函数用于指定路由的历史记录模式。

我们还定义了两个路由规则：一个路由规则对应路径’/’，另一个对应路径’/about’。

这些路由规则将路由到Home和About组件。

路由规则

在 Vue Router 中，routes 是一个数组，用于定义路由规则。

每个路由规则都包含了如下属性：

• path：一个字符串，表示路径，可以包含动态片段和参数（如 /users/:id）。
• name：一个字符串，表示路由的名称，方便在代码中引用。
• component：一个组件，表示该路由对应的视图组件。
• components：一个对象，表示该路由对应的多个视图组件。
• redirect：一个字符串或者一个函数，表示路由重定向的目标，可以是一个路径或者是一个具有to属性的对象。
• alias：一个字符串或者一个数组，表示路由的别名，访问别名等同于访问路由本身。
• meta：一个对象，表示该路由的元信息，用于存储一些额外的信息（如页面标题、是否需要登录等）。

高级的路由管理

除了上述常用属性之外，还有一些其他的属性用于更高级的路由管理，例如：

• beforeEnter：一个函数，表示路由独享的守卫，用于在路由切换前执行一些操作。
• props：一个布尔值或者一个函数，表示是否将组件的 props 属性和 URL 参数映射到组件的 props 属性中，或者自定义如何映射。
• caseSensitive：一个布尔值，表示该路由是否区分大小写，默认为 false。
• pathToRegexpOptions：一个对象，用于配置 path-to-regexp 库的选项。
• children：一个数组，表示该路由的子路由，用于实现嵌套路由。

路由规则可以通过一个对象或者一个数组来定义，例如：

// 定义单个路由规则
const homeRoute = {
  path: '/',
  name: 'Home',
  component: Home
} 

// 定义多个路由规则
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home //组件名方式加载
  }, {
    path: '/about', name: 'About', 
    component: () => import("../views/AboutView.vue"),// 懒加载 
    meta: { 
      requiresAuth: true 
    }
  }]

路由模式:`hash` 和 `history`

在 Vue Router 中，可以使用两种不同的 history 模式：hash 和 history。

• createWebHashHistory()：使用 URL 的 hash（即 URL 中的 #）来模拟一个完整的 URL。这种模式的优点是在不支持 HTML5 History API 的浏览器中也可以正常使用，缺点是 URL 比较丑陋，不利于 SEO。
• createWebHistory()：使用 HTML5 History API 来实现路由，URL 是真实的 URL，不需要 # 符号。这种模式的优点是 URL 更加美观，不会出现 # 符号，缺点是需要浏览器支持 HTML5 History API，如果不支持则会出现兼容性问题。

在创建路由器实例时，需要通过 createWebHashHistory() 或者 createWebHistory() 函数来创建一个 history 对象。

例如：

const router = createRouter({
// 使用 history 模式
  history: createWebHistory(),
  routes,
});

const router = createRouter({
// 使用 hash 模式
  history: createWebHashHistory(),
  routes,
});

承载路由 `<router-view>`

在 Vue 中，可以使用 <router-view> 标签来承载路由。

<router-view> 标签会根据当前的路由信息动态渲染对应的组件。

例如

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div>
</template>

在这个例子中，<router-view> 标签承载路由，并在当前路由地址对应的组件中动态渲染内容。

当用户点击链接切换路由时，<router-view> 标签会自动更新并渲染新的组件。

需要注意的是，一个 Vue 应用只能有一个根组件，因此 <router-view> 标签通常是在根组件中使用。在其他组件中，可以通过 name 属性来指定具名视图的名称，从而在同一个组件中承载多个视图。

<template>
  <div>
    <router-view></router-view>
    <router-view name="sidebar"></router-view>
  </div>
</template>

在这个例子中，根组件中有两个 <router-view> 标签，

• 一个用于承载默认视图，
• 另一个用于承载名为 sidebar 的具名视图。

在路由配置中，可以通过 components 属性来指定多个组件作为具名视图的内容。

const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Home,
        sidebar: Sidebar
      }
    }
  ]
})

在这个例子中，路由地址为 / 的路由将同时渲染 Home 组件和 Sidebar 组件。

其中，Home 组件将被渲染到默认视图中，Sidebar 组件将被渲染到名为 sidebar 的具名视图中。

集成路由 — 注意use要在mount之前

将路由实例集成到Vue应用程序中。

这可以在应用程序的根组件中完成,一般在 main.js中配置路由。

例如，以下代码将路由实例集成到根组件中：

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

const app = createApp(App);
app.use(routers); // 挂载路由

//注意use要在mount之前 
app.mount('#app');

在这个例子中，我们使用createApp函数创建一个Vue应用程序实例，并使用use方法将路由实例集成到应用程序中。

我们还在模板中使用了router-view组件来渲染当前路由所匹配的组件。

跳转路由

在 Vue.js 3.x 中，跳转路由的方法和 Vue.js 2.x 略有不同。

以下是几种常见的跳转路由的方法：

使用 `<router-link>` 标签

在模板中使用 <router-link> 标签可以生成一个路由链接，并且当用户点击该链接时，自动跳转到相应的路由。

例如：

<router-link to="/about">Go to About</router-link>

在这个例子中，使用 <router-link> 标签生成了一个链接，点击该链接将跳转到 /about 路由。

例如 app.vue代码显示如何使用<router-link>组件创建链接：

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
  </div>
</template>

在这个例子中，我们使用<router-link>组件创建两个链接：

• 一个指向路由’/’，
• 另一个指向路由’/about’。

这是一个简单的Vue3中基本路由配置的示例。

可以通过定义更多的路由规则和使用更多的Vue Router功能来扩展它。

使用 useRouter 方法

在 Vue.js 3.x 中，可以使用 useRouter 方法获取路由实例，并使用其提供的方法跳转到其他路由。

useRouter 是 Vue Router 4.x 中的一个新特性，用于在组件中访问路由实例。

在 Vue Router 4.x 中，可以使用 createRouter 方法创建路由实例，并通过 provide/inject 或 app.config.globalProperties 将其注入到 Vue 实例中。然后，在组件中，可以使用 useRouter 方法访问注入的路由实例。

useRouter 方法是一个 Vue 3.x 中的 Composition API 方法，需要使用 import { useRouter } from 'vue-router' 引入。

例如：

<template>
    <div>
        <h1>about</h1>
        <button @click="handleClick">Go to About</button>
    </div>
</template>

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

const router = useRouter()

const handleClick = () => {
    //push一个url地址
    router.push('/')
    //push一个对象
    //router.push(name:'about')
}
</script>

<style scoped></style>

在这个示例中，使用了 <template> 标签包裹了模板，其中包括一个标题和一个按钮。

当按钮被点击时，调用 handleClick 方法，该方法使用 useRouter 方法获取了当前组件所在的路由实例，然后调用 push 方法跳转到路由 /。

需要注意的是，这个示例中使用了 Vue.js 3.x 的 Composition API，因此需要使用 import { useRouter } from 'vue' 引入组件和路由实例。

push 与 replace

• push 方法用于在路由堆栈中添加新路由记录，
• 而 replace 方法用于替换当前路由记录，

因此可以使用 replace 方法进行路由跳转，例如：

<template>
  <button @click="handleClick">Go to About</button>
</template>

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

const handleClick = () => {
  router.replace('/about')
}   
</script>

需要注意的是，使用 replace 方法进行路由跳转会替换当前路由记录，因此用户无法通过浏览器的后退按钮返回到上一个路由。

如果需要保留当前路由记录并添加新的路由记录，应该使用 push 方法。

后退、前进: back 和 forward

在 Vue.js 3.x 中，可以使用路由实例提供的 back 和 forward 方法实现后退和前进的功能。

具体来说，

• back 方法将用户导航到前一个历史记录条目，
• forward 方法将用户导航到下一个历史记录条目。

例如：

// 使用 useRouter 方法
import { defineComponent, useRouter } from 'vue'

export default defineComponent({
  setup() {
    const router = useRouter()

    const goBack = () => {
      router.back()
    }

    const goForward = () => {
      router.forward()
    }

    return {
      goBack,
      goForward
    }
  }
})

需要注意的是，使用 back 和 forward 方法进行导航时，需要确保用户在浏览器中已经浏览了足够多的历史记录，否则这些方法可能会无法正常工作。

另外，这些方法也可能会因为浏览器的不同而表现不同。

go

在 Vue.js 3.x 中，也可以使用路由实例提供的 go 方法实现前进和后退的功能。

该方法接受一个整数参数 n，表示前进或后退的步数。当 n 为正数时，代表前进，而当 n 为负数时，代表后退。

例如：

// 使用 useRouter 方法
import { defineComponent, useRouter } from 'vue'

export default defineComponent({
  setup() {
    const router = useRouter()

    const goBack = () => {
      router.go(-1)
    }

    const goForward = () => {
      router.go(1)
    }

    return {
      goBack,
      goForward
    }
  }
})