VueRouter基本

一、路由的概念与作用

路由，简单来说，就是根据不同的访问路径展示不同组件内容的机制。比如，用户访问 “/login” 路径时，展示登录页面；访问 “/”（根路径）时，展示主页。这使得我们可以在一个页面中实现多个视图的切换，而无需重新加载整个页面，极大地提升了用户体验。

二、Vue Router 的使用步骤

1.安装 Vue Router

打开命令行工具，进入项目目录。 执行命令npm install vue-router@4（这里使用的是版本 4，安装过程可能需要一些时间，请耐心等待）。

2.创建路由器并导出

在src/router/index.js文件中进行操作（如果没有该文件，需手动创建）。 导入vue-router相关模块： import { createRouter, createWebHistory } from 'vue-router';

导入需要使用的组件（假设已经有LoginView和RegisterView组件）：

import LoginView from '../views/LoginView.vue';
import LayoutView from '../views/RegisterView.vue';

定义路由关系数组：

const routes = [
  {
    path: '/login',
    component: LoginView
  },
  {
    path: '/Register',
    component: RegisterView
  }
];

创建路由器并指定路由模式为history：

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

导出路由器：

export default router;

3.在 Vue 应用实例中使用 Vue Router

打开main.js文件。 导入创建好的路由器：

import router from './router';

在创建 Vue 应用实例后，使用app.use()方法注册路由器：

const app = createApp(App);
app.use(router);

4.声明router-view标签

打开App.vue文件。 在模板中声明router-view标签，用于展示路由匹配到的组件内容：

<template>
   <button @click="login">登录</button>
    <button @click="Register">注册</button>
  <router-view></router-view>
</template>

三、实现页面跳转

在登录成功后，我们希望自动跳转到主页。以下是实现步骤：

打开LoginView.vue文件。 导入useRouter函数：

import { useRouter } from 'vue-router';

在登录函数中，获取路由器实例并调用push方法进行页面跳转：

const router = useRouter();
function login() {
  // 假设这里是登录验证逻辑，登录成功后执行以下跳转
  router.push('/');
}

通过以上步骤，我们成功实现了 Vue Router 的基本使用，包括安装、配置路由、在应用中使用以及页面跳转功能.