【前端之Vue3路由机制router】

路由简介

路由 就是根据不同的 URL 地址展示不同的内容或页面。

• 单页应用程序（SPA）中，路由可以实现不同视图之间的无刷新切换，提升用户体验；
• 路由还可以实现页面的认证和权限控制，保护用户的隐私和安全；
• 路由还可以利用浏览器的前进与后退，帮助用户更好地访问历史页面。

路由入门案例

【案例：启动程序，进入首页，点击首页和列表可以自由切换】

1、创建项目安装依赖（含路由依赖）

• npm create vite //创建项目，
• cd 项目文件夹 //进入项目文件夹
• npm install或npm i //安装项目需求依赖
• npm install vue-router或 npm install vue-router@4 --save // 安装vue-router

2、创建页面和组件

router-view：该标签会被替换成具体的.vue对象， 一个视图上可以同时存在多个router-view，每个router-view可以设置成展示哪个组件

App.vue

<script setup></script>

<template>
  <div>
    <!-- 父组件跳转到不同页面 -->
    <h2>1、父组件 App.vue 跳转到不同页面按钮</h2>
    <router-link to="/home">Home页面 按钮</router-link><br />
    <router-link to="/list">List页面 按钮</router-link><br />
    <router-link to="/add">Add页面 按钮</router-link><br />
    <router-link to="/update">Update页面 按钮</router-link><br />
    <hr />
    此页面当前部分内容【不会随着下面路由内容的改变而改变】
    <hr />
    <!-- 该标签会被切换成具体的.vue文件
    一个视图上可以同时存在多个router-view，每个router-view可以设置成展示哪个组件
    一般来说，实际场景中一个.vue中用一个router-view标签就可以解决99%的业务需求，此处了解即可；
     -->
    <router-view></router-view>
    <hr />
    此页面当前部分内容【不会随着下面路由内容的改变而改变】
    <hr />
  </div>
</template>

<style scoped></style>

Home.vue

<script setup></script>

<template>
  <div>
    <h2>2、兄弟组件界面之间的跳转</h2>
    <router-link to="/list">Home页面跳转List页面</router-link><br />
    <h1>Home页面</h1>
  </div>
</template>

<style scoped></style>

Add.vue

<script setup></script>

<template>
  <div>
    <h2>2、兄弟组件界面之间的跳转</h2>
    <router-link to="/update">Add页面跳转Update页面</router-link><br />
    <h1>Add页面</h1>
  </div>
</template>

<style scoped></style>

List.vue

<script setup></script>

<template>
  <div>
    <h2>2、兄弟组件界面之间的跳转</h2>
    <router-link to="/add">List页面跳转Add页面</router-link><br />
    <h1>List页面</h1>
  </div>
</template>

<style scoped></style>

Update.vue

<script setup></script>

<template>
  <div>
    <h2>2、兄弟组件界面之间的跳转</h2>
    <router-link to="/home">Update页面跳转Home页面</router-link><br />
    <h1>Update页面</h1>
  </div>
</template>

<style scoped></style>

3、准备路由配置

• 1.导入路由创建的相关方法

• import { createRouter, createWebHashHistory } from "vue-router";

• 2.创建路由对象,声明路由规则

• 使用 createRouter(),该方法有两个属性：history 用于记录路由的历史; routes：用于定义多个不同路径和组件之间的对应关系

• 3.对外暴露路由对象

• export default router;;

• 4.导入创建的add、list等.vue组件
  

router.js

//导入路由创建的相关方法
import {
    createRouter, createWebHashHistory } from "vue-router";
/* 导入.vue组件 */
import Home from "../components/Home.vue";
import List from "../components/List.vue";
import Add from "../components/Add.vue";
import Update from "../components/Update.vue";
//创建路由对象,声明路由规则
const router = createRouter({