VueRouter4从入门到实践：新手必读指南

本文全面介绍了如何使用vueRouter4，从安装和基本配置到高级功能如嵌套路由和导航守卫，帮助你构建灵活强大的单页面应用。通过详细示例，你将学会如何定义路由规则、实现路由跳转以及处理动态参数和查询参数。此外，文章还涵盖了路由视图组件的设计和meta属性的使用，进一步提升应用的复杂性和功能性。

VueRouter4是什么

VueRouter是Vue.js官方推荐的路由管理器，它帮助你管理应用的URL和组件之间的映射关系。VueRouter4是VueRouter的最新版本，专门针对Vue3设计。VueRouter4可以让你的应用更加灵活和强大，通过它你可以轻松实现单页面应用的各种路由需求。

安装VueRouter4

要使用VueRouter4，首先需要确保你的项目中已经安装了Vue3。接下来，通过npm或yarn安装VueRouter4：

npm install vue-router@next --save
# 或者
yarn add vue-router@next

安装完成后，你可以在项目中引入VueRouter：

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

然后创建路由实例：

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

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

创建路由实例

首先需要创建一个路由实例。VueRouter4推荐使用createRouter和createWebHistory来创建路由和历史记录管理器。

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

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

定义路由规则

在创建路由实例后，你需要定义路由规则，即路由的路径和对应的组件。路由规则通过routes数组来定义。每个路由规则对象包含path和component属性，分别对应路径和组件。

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

路由跳转与链接

路由跳转和链接是实现页面跳转的主要方式。你可以使用router.push方法进行程序内部的跳转，也可以直接在模板中使用<router-link>标签。

使用router.push

router.push('/about');

使用<router-link>

<router-link to="/about">前往关于页面</router-link>

你可以通过router-link的to属性来指定跳转的目标路径。

动态路由参数

动态路由参数允许你在路由路径中通过:来定义参数。例如，/user/:id中的:id就是动态参数。

在组件中，你可以通过this.$route.params来访问这些参数。

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

在User组件中访问参数：

export default {
  props: ['id'], // 或者直接使用 this.$route.params.id
  mounted() {
    console.log(this.id); // 输出用户ID
  }
}

查询参数的使用

查询参数主要用于传递额外的信息。路由路径中使用?来表示查询参数，例如/user?id=1。在组件中，可以通过this.$route.query来访问这些参数。

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

在User组件中访问查询参数：

export default {
  props: ['id'],
  mounted() {
    console.log(this.$route.query.id); // 输出查询参数id的值
  }
}

创建嵌套路由

嵌套路由允许你在一个路由路径下定义多个子路由，这在构建复杂的布局时非常有用。

const routes = [
  {
    path: '/parent',
    component: Parent,
    children: [
      {
        path: 'child1',
        component: Child1
      },
      {
        path: 'child2',
        component: Child2
      }
    ]
  }
];

在模板中使用嵌套路由：

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

使用命名视图

命名视图允许你在同一个路由路径下使用多个组件。这样可以更好地组织和设计复杂的UI布局。

const routes = [
  {
    path: '/named-views',
    component: NamedViewsLayout,
    children: [
      {
        path: '',
        components: {
          default: DefaultView,
          sidebar: SidebarView
        }
      }
    ]
  }
];

在模板中使用命名视图：

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

前置守卫、组件内守卫、后置守卫

导航守卫允许你在路由跳转前后执行自定义逻辑。主要有以下几种：

1. 全局前置守卫：在导航发生之前进行判断，决定是否进行跳转。
2. 全局后置守卫：在导航结束后进行的操作。
3. 组件内守卫：直接在组件内部定义的守卫。

const routes = [
  {
    path: '/protected',
    component: Protected,
    beforeEnter: (to, from, next) => {
      // 判断用户是否登录
      if (isUserLoggedIn()) {
        next();
      } else {
        next('/login');
      }
    }
  }
];

组件内守卫

在组件中，你可以通过beforeRouteEnter、beforeRouteUpdate和beforeRouteLeave来定义守卫。

export default {
  beforeRouteEnter(to, from, next) {
    // 在进入组件前执行的逻辑
    next();
  },
  beforeRouteUpdate(to, from, next) {
    // 在路由更新时执行的逻辑
    next();
  },
  beforeRouteLeave(to, from, next) {
    // 在离开组件前执行的逻辑
    next();
  }
}

实例：登录验证

假设你有一个登录页面，用户需要登录后才能访问其他页面。你可以通过导航守卫来实现这一逻辑。

const routes = [
  {
    path: '/protected',
    component: Protected,
    beforeEnter: (to, from, next) => {
      if (localStorage.getItem('token')) {
        next();
      } else {
        next('/login');
      }
    }
  },
  {
    path: '/login',
    component: Login
  }
];

在登录组件中，通过点击按钮来保存token。

<template>
  <button @click="handleLogin">登录</button>
</template>

<script>
export default {
  methods: {
    handleLogin() {
      localStorage.setItem('token', 'some-token');
      this.$router.push('/protected');
    }
  }
}
</script>

路由视图组件的设计

在复杂的单页面应用中，你需要设计更复杂的路由视图。例如，你可能有一个主布局组件，其中包含多个子视图。

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

在MainLayout组件中，你可以使用<router-view>来显示不同的子视图。

<template>
  <div>
    <header>头部</header>
    <router-view></router-view>
    <footer>底部</footer>
  </div>
</template>

使用meta属性

meta属性允许你在路由规则中添加额外的元数据，这些数据可以在导航过程中访问。

const routes = [
  {
    path: '/protected',
    component: Protected,
    meta: {
      requiresAuth: true
    }
  }
];

你可以在导航守卫中使用meta属性来实现自定义逻辑。

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isUserLoggedIn()) {
    next('/login');
  } else {
    next();
  }
});
``

通过这些步骤，你能够更好地理解和使用VueRouter4提供的各种功能，构建出灵活且强大的单页面应用。