本文详细介绍了如何从零开始学习vueRouter4，包括安装、配置和使用等基本步骤。文章涵盖了路由配置、路由链接、路由视图以及路由参数和查询参数的使用方法。此外，还讲解了路由守卫和元信息的定义与应用，帮助读者全面掌握vueRouter4的核心功能。通过这些内容，你可以轻松构建自己的Vue应用。

1. 引入vueRouter4

1.1 安装vueRouter4

为了在项目中使用vueRouter4，首先需要安装vueRouter4。可以使用npm或yarn来安装。以下是使用npm安装的示例：

npm install vue-router@next

注意，这里使用了@next来确保安装的是vueRouter4。如果你已经安装了vueRouter3，可以先卸载再重新安装vueRouter4，以确保没有版本冲突：

npm uninstall vue-router
npm install vue-router@next

1.2 引入vueRouter4

安装完vueRouter4后，需要在项目中引入它。假设你已经在Vue项目中安装了vueRouter4，你可以根据以下方式引入它：

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

createRouter用于创建路由实例，而createWebHistory则用于创建路由的history模式，这里使用的是history模式。

2. 配置路由

2.1 创建路由实例

创建路由实例需要使用createRouter函数。首先，定义一个路由配置对象，然后传入createRouter函数中。以下是一个简单的路由配置对象示例：

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

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

在这个配置对象中，routes是一个数组，每个元素都是一个路由对象，包含了路径和对应的组件。history使用createWebHistory创建，这里使用的是history模式。

2.2 定义路由规则

在前面的配置中，我们定义了两个路由规则，分别是路径/和路径/about。路径对应着组件，当用户访问这些路径时，对应的组件就会被渲染。

例如，假设Home组件和About组件如下：

// Home.vue
<template>
  <div>
    <h1>Home Page</h1>
  </div>
</template>

<script>
export default {
  name: 'Home',
};
</script>

// About.vue
<template>
  <div>
    <h1>About Page</h1>
  </div>
</template>

<script>
export default {
  name: 'About',
};
</script>

2.3 路由模式设置

路由模式可以设置为history模式或hash模式。history模式使用HTML5 History API，在URL中不会出现#，而hash模式会在URL中添加#。默认情况下，vueRouter4使用的是history模式。如果需要使用hash模式，可以使用createWebHashHistory：

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

3. 使用路由

3.1 路由链接

在Vue组件中使用<router-link>来创建路由链接。<router-link>相当于HTML中的<a>标签，但它会动态生成href属性，不会直接跳转，而是通过vueRouter4的内部机制来切换路由。

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

3.2 路由视图

路由视图是动态渲染组件的地方。使用<router-view>标签来定义路由视图的位置。

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

当用户点击链接，对应的<router-view>会渲染对应的组件。

3.3 命名视图

有时候，需要在同一个视图中渲染多个组件，这时候可以使用命名视图。在路由配置中定义命名视图：

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

在模板中定义命名视图：

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

4. 路由参数与查询参数

4.1 路由参数传递

路由参数是路径中变化的部分，用于传递数据。例如，路径/user/:id中的id就是一个路由参数。在<router-link>中通过params来传递路由参数。

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

在路由配置中定义带有参数的路径：

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

在组件中通过this.$route.params.id来获取路由参数：

<script>
export default {
  name: 'User',
  mounted() {
    console.log(this.$route.params.id);
  },
};
</script>

4.2 查询参数使用

查询参数是路径中的可选部分，用于传递额外的数据。例如，路径/search?q=vue中的q就是一个查询参数。在<router-link>中通过query来传递查询参数。

<template>
  <div>
    <router-link :to="{ path: 'search', query: { q: 'vue' }}">Search Vue</router-link>
  </div>
</template>

在路由配置中，查询参数不需要特别定义，可以直接在组件中通过this.$route.query来访问：

<script>
export default {
  name: 'Search',
  mounted() {
    console.log(this.$route.query.q);
  },
};
</script>

5. 路由守卫

5.1 前置守卫

前置守卫在导航被确认前执行，可以用来做权限验证或数据预加载。

router.beforeEach((to, from, next) => {
  console.log(`from ${from.path} to ${to.path}`);
  // 验证权限后决定是否继续导航
  next();
});

5.2 后置守卫

后置守卫在导航被确认后执行，可以用来记录日志或做清理工作。

router.afterEach((to, from) => {
  console.log(`navigated from ${from.path} to ${to.path}`);
});

5.3 导航守卫

导航守卫可以更灵活地控制导航，例如在导航开始时、进入组件时、离开组件时等。

router.beforeRouteLeave((to, from, next) => {
  if (!confirmed) {
    next(false);
  } else {
    next();
  }
});

6. 路由元信息

6.1 元信息定义

在路由配置中，可以通过meta属性来定义元信息。元信息可以包含任何数据，通常用于权限验证或组件缓存控制。

const routes = [
  { path: '/',
    component: Home,
    meta: { requiresAuth: true, requiresAdmin: false },
  },
  { path: '/about',
    component: About,
    meta: { requiresAdmin: true },
  },
];

6.2 元信息使用

在组件中通过this.$route.meta来访问元信息。例如，可以在组件中检查当前路由是否需要管理员权限：

<script>
export default {
  name: 'About',
  mounted() {
    const { requiresAdmin } = this.$route.meta;
    if (!requiresAdmin) {
      this.$router.push('/');
    }
  },
};
</script>

总结

本文详细介绍了如何从零开始学习vueRouter4，包括安装、配置、使用、参数传递、守卫和元信息等。通过这些内容，你已经掌握了基本的vueRouter4使用方法，可以开始构建自己的Vue应用了。更多高级用法可以在慕课网的相关课程中学习。