【Vue3+Vite】路由机制router 快速学习 第四期

---

路由简介

路由是什么

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

路由的作用

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

---

一、路由入门案例

创建路由基本流程：

• 页面组件准备
• App主体页 :
  • 定义 路由链接 <router-link to="/">
  • 定义 路由显示位置 <router-view name="homeView">
• js配置路由：
  • 导入路由vue-router相关依赖 createRouter 和 createWebHashHistory方法
  • 创建路由方法 声明路由规则 createRouter()
    • path:'/'
    • components:{ homeView:Home }
  • 对外暴露router对象变量 给main.js
• main.js中导入router配置
  • import 路由js
  • 绑定路由对象 app.use(router)

需求分析：

1. 创建项目 导入路由依赖

npm create vite //创建项目cd 项目文件夹 //进入项目文件夹
npm install //安装项目需求依赖
npm install vue-router@4 --save //安装全局的vue-router 4版本

2. 准备页面和组件

• components/Home.vue

<script setup>
</script>

<template>
  <div>
    <h1>Home页面</h1>
  </div>
</template>

<style scoped>
</style>

• components/List.vue

<script setup>
</script>

<template>
  <div>
    <h1>List页面</h1>
  </div>
</template>

<style scoped>
</style>

• App.vue

<script setup>
</script>

<template>
  <div>
    <h1>App页面</h1>
    <hr />
    <!-- 路由的连接 -->
    <router-link to="/">home页</router-link>
    <br />
    <router-link to="/list">list页</router-link>
    <br />
    <!-- 路由连接对应视图的展示位置 -->
    <hr />默认展示位置:
    <router-view></router-view>
    <hr />Home视图展示:
    <router-view name="homeView"></router-view>
    <hr />List视图展示:
    <router-view name="listView"></router-view>
    <hr />
  </div>
</template>

<style scoped>
</style>

3. 准备路由配置

• createWebHashHistory() 是 Vue.js 基于 hash 模式创建路由的工厂函数。
• 在使用这种模式下，路由信息保存在 URL 的 hash 中，
• 使用 createWebHashHistory() 方法，可以创建一个路由历史记录对象，用于管理应用程序的路由。
• 在 Vue.js 应用中：
  - 通常使用该方法来创建路由的历史记录对象。
  - 就是路由中缓存历史记录的对象，vue-router 提供

• src/routers/router.js

// 导入路由创建的相关方法
import {
   
    createRouter, createWebHashHistory } from 'vue-router'

// 导入vue组件
import Home from '../components/Home.vue'
import List from '../components/List.vue'

// 创建路由对象,声明路由规则
const router = createRouter({
   
   
    history: createWebHashHistory(),
    routes: [
        {
   
   
            path: '/',
            components: {
   
   
                default: Home,
                homeView: Home
            }
        },
        {
   
   
            path: '/list',
            components: {
   
   
                listView: List