请输入图片描述

1. 什么是Vue Router

Vue Router是Vue.js官方的路由管理库，用于构建SPA应用程序。在传统WEB应用程序中，是用一些超链接在多个HTML页面中跳转；而vue的单页面应用是基于路由和组件的，用路由设定访问路径，并将路径和组件映射起来，是路径之间的切换，也就是组件的切换。

1.1 单页应用

SPA（Single Page Application）是一种 Web 应用程序的体系结构模式，一个WEB项目只有一个 HTML 页面。在SPA中，整个应用程序加载一次，然后在用户与应用程序交互时，只更新页面的一部分，而不是整个页面重新加载。

2. 安装Vue Router

  1. 首先，确保您已经安装了Vue.js。然后，您可以使用npm或yarn安装Vue Router：
npm install vue-router
# 或
yarn add vue-router
  1. 在全局组件main.js中导入并注册
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

注册完成后，给Vue提供两个全局组件和两个全局对象：

  • 全局组件：RouterLink 和 RouterView；
  • 全局对象：$router 和 $route；

3. 基本使用

3.1 router模式

  1. Hash模式
  • Vue Router的默认模式是哈希模式。在这种模式下把前端路由的路径用“#”符拼接在域名后。如：http://localhost:8080/#/about， "#"号后面的就是Hash值。
  • 路由的哈希模式利用了onhashchange事件，在路由发生变化时，改变路径中的Hash值，不会向服务器发送新的请求，而是触发onhashchange事件。在hashchange的监听事件内得到改变后的路径，从而找到对应页面进行加载。
  • hash值的改变，都会在浏览器的访问历史中增加一个记录，所以可以通过浏览器的回退、前进按钮控制hash的切换

2.History模式

  • 更改路由器模式为history可在router/index.js中添加mode:'history':
const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
});
  • History模式路径上不需要拼接“#”符号。如：http://localhost:8080/home
  • 在使用 history 模式时，需要后台配置支持，如果后台没有正确的配置，容易出现404的页面。
  • history 提供了pushState和replaceState两个方法来记录路由状态，这两个方法只改变 URL 不会引起页面刷新。
  • history通过onpopstate事件监听变化，在点击浏览器的前进或者后退功能时触发，在onpopstate 事件中根据状态信息加载对应的页面内容。

3.2 定义路由

在router/index.js中给组件的路径命名

const routes = [
  {
    path: "/",
    name: "home",
    component: HomeView,
  },
];

path：给路由配置路径名
name：给路由配置一个唯一的名称。在代码中用作路由的标识符，并且在进行程序化导航或链接生成时非常有用。
component：指向当路由匹配的组件的路径
path和component是映射关系，不同的路径对应不同的组件。

  • 路由运行原理
    在 router 数组中会从上往下查找对应的path，如果有匹配的path，则显示path 对应的 component 内容。

3.3 路由显示

Router-view被称为路由的出口,用于显示当前路由组件的组件。
因为所有的组件注册最终在app.vue注册完毕,所以首先App.vue有一个最顶层的router-view。最先展示的内容为在路径文件中设置为根路径\的组件内容。
如果要实现登录之后左侧菜单栏不变，右侧随路由的切换变化显示的内容，可以使用嵌套路由

<div class="content-box" ref="contents">
    <div>
        <v-tags></v-tags>
    </div>
    <div class="content">
        <router-view v-slot="{ Component }">
            <!-- transition动画效果 -->
            <transition name="move" mode="out-in">
                <keep-alive :include="tagsList">
                    <component :is="Component" />
                </keep-alive>
            </transition>
        </router-view>
    </div>
</div>

3.4 重定向

redirect：使得一个路由地址A与另一个路由地址B联系起来，执行A的时候会强制跳转到跳转执行B。

var router = new VueRouter({
  routes:[
    {path:'/', redirect:'/home'},
    {path:'/home', component:Home}
  ]
})

执行/根目录时会跳转到/home目录，页面显示home组件

4. 路由导航

4.1 声明式导航

router-link 是Vue Router提供的组件，用于创建导航链接。通过 router-link 创建的链接，其本质是a标签，它会自动根据路由配置生成链接，可以在不重新加载页面的情况下更改 URL。

<router-link to="/home">Home</router-link>
  • to属性指定了目标路由的路径，当用户点击该链接时，会导航到指定的路由对应的组件。
<router-link :to="/index" tag="li">Home</router-link>
  • tag属性将 <router-link> 渲染成tag值指定的标签。

4.2 编程式导航

编程式导航就是在vue组件内部通过this.$router访问路由实例

  • 跳转到指定路径,并增加一条历史记录

    this. $router. push('path')

  • 跳转到指定的路径，并替换掉当前的历史记录

    this. $router.replace('path')

  • 在浏览历史中前进和后退

    this.$router.go(数值 n)

5. 路由传参

5.1 动态路由

动态路由参数是通过路由路径中的占位符定义的，通常以冒号（:）开头：

const routes = [
  {
    path: '/user/:id',
    name:'user'
    component: UserProfile
  }
];

传递参数

//声明式
<router-link :to="/user/1"> 跳转到匹配路由 </router-link>

// 编程式
this.$router.push({
   name: 'user',
   params:{
    id:1
   }
})

:id 是路由参数，可以通过this.$route.params.id来访问。可以在组件中直接使用这个参数：

<template>
  <div>
    <p>User ID: {{ $route.params.id }}</p>
  </div>
</template>

路由携带params参数的时候，使用to对象写法，就不能使用path配置项了，必须使用name配置。

5.2 查询字符串：

查询字符串是附加在URL后面的键值对，通常以?开头，多个查询字符串之间使用&分隔：

<router-link to="/user?id=123&name=John"></router-link>

在路由组件中，您可以通过this.$route.query来访问查询参数：

<template>
  <div>
    <p>User ID: {{ $route.query.id }}</p>
    <p>User Name: {{ $route.query.name }}</p>
  </div>
</template>

查询参数通常用于过滤、排序或配置路由。

5.3 命名路由：

命名路由是为路由起一个名称，使您可以在组件中使用路由名称来跳转，而不必依赖于路径。在路由配置中，您可以为每个路由定义一个name属性：

const routes = [
  {
    path: '/user/:id',
    name: 'user',
    component: UserProfile
  }
];

在组件中，您可以使用$router.push或<router-link>来跳转到命名路由,通过params/query达到传递参数的效果：

<template>
  <div>
    <router-link :to="{ name: 'user', params: { id: 123 }}">User Profile</router-link>
  </div>
</template>

获取参数
this.$route.params.id
命名路由使路由配置更具可读性和维护性。

5.4 props传参：

除了使用this.$route来访问路由参数，还可以使用props选项将路由参数传递为组件的属性。在路由配置中，您可以设置props为true，这将自动将路由参数映射为组件的属性：

const routes = [
  {
    path: '/user/:id',
    component: UserProfile,
    props: true
  }
];

然后在组件中，您可以直接访问id属性：

<template>
  <div>
    <p>User ID: {{ id }}</p>
  </div>
</template>

<script>
export default {
  props: ['id']
}
</script>

这种方式使组件更具封装性，不需要直接访问$route对象。

5.5 元信息传参：

Vue Router还支持在路由配置中定义元信息（meta），您可以使用这些元信息来传递额外的数据或标记路由。在路由配置中，您可以添加一个meta属性：

const routes = [
  {
    path: '/user/:id',
    component: UserProfile,
    meta: { requiresAuth: true }
  }
];

在导航守卫中，您可以访问路由的元信息：

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // 需要身份验证
    if (userIsAuthenticated()) {
      next();
    } else {
      next('/login');
    }
  } else {
    next();
  }
});

这种方式非常有用，因为您可以在路由上附加各种信息，如权限要求、页面标题等，然后根据这些信息执行相应的操作。

6. 路由嵌套

Vue Router还支持嵌套路由，这使得构建复杂的应用程序更容易。可以在一个父路由内定义子路由，这些子路由将渲染在父路由的组件内。

const routes = [
  {
    path: '/user/:id',
    component: User,
    children: [
      {
        path: 'profile',
        component: UserProfile
      },
      {
        path: 'posts',
        component: UserPosts
      }
    ]
  }
];
Last modification：October 31st, 2023 at 02:06 pm
© 允许规范转载