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

本文详细介绍了Vue.js中的路由功能,包括路由的基本概念、创建入门案例、路由重定向、编程式路由的使用、以及如何通过useRouter进行路由传参。同时,还涉及了路由守卫的概念和应用场景。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >


路由简介

路由是什么

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

路由的作用

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

一、路由入门案例

创建路由基本流程:

  • 页面组件准备
  • App主体页 :
    • 定义 路由链接 <router-link to="/">
    • 定义 路由显示位置 <router-view name="homeView">
  • js配置路由:
    • 导入路由vue-router相关依赖 createRoutercreateWebHashHistory方法
    • 创建路由方法 声明路由规则 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
            
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

「已注销」

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值