【VUE】day07 路由

news2025/4/22 9:21:32

【VUE】day07 路由

  • 1. 路由
  • 2. 前端路由的工作方式
  • 3. 实现简易的前端路由
  • 4. 安装和配置路由
    • 4.1 安装`vue-router`包
    • 4.2 创建路由模块
    • 4.3 导入并挂在路由模块
  • 5. 在路由模块中声明路由的对应关系
    • 5.1 router-view

1. 路由

在 Vue.js 中，路由（Routing）是通过 ​Vue Router 实现的。Vue Router 是 Vue.js 官方提供的路由管理器，用于构建单页面应用程序（SPA）。它允许你在不重新加载页面的情况下，动态切换视图和组件，同时保持 URL 的同步。

在 Vue.js 中，路由（Routing）是通过 ​Vue Router 实现的。Vue Router 是 Vue.js 官方提供的路由管理器，用于构建单页面应用程序（SPA）。它允许你在不重新加载页面的情况下，动态切换视图和组件，同时保持 URL 的同步。


总体来说，可以实现以下的功能

  • 通过URL来映射不同的组件，实现页面切换；

  • 支持动态路由，使 URL 传递参数；

  • 提供嵌套路由，实现多级路由嵌套；

  • 支持编程式导航，可以通过 JavaScript 代码进行跳转；

  • 提供路由守卫，控制页面访问权限。

核心概念
​1. 路由（Route）​
路由定义了 URL 和组件之间的映射关系。当用户访问某个 URL 时，Vue Router 会根据路由配置加载相应的组件。

​2. 路由表（Routes）​
路由表是一个数组，包含多个路由配置。每个路由配置通常包括 path（路径）、component（组件）等属性。

3.​ 路由器（Router）​
路由器是 Vue Router 的核心实例，负责管理路由表和处理路由切换。

4.​ 路由视图（RouterView）​
<router-view> 是一个占位符组件，用于渲染当前路由匹配的组件。

​5. 路由链接（RouterLink）​
<router-link>是一个导航组件，用于生成导航链接，点击后会切换到对应的路由。

​6. 动态路由
动态路由允许在路径中使用参数（如 /user/:id），这些参数可以在组件中通过 this.$route.params 访问。

7.​ 嵌套路由
嵌套路由允许在父路由中定义子路由，用于构建复杂的页面结构。

8.​ 路由守卫（Navigation Guards）​
路由守卫是钩子函数，用于在路由切换前后执行某些操作，例如权限验证、数据加载等。

2. 前端路由的工作方式


在这里插入图片描述

在这里插入图片描述

3. 实现简易的前端路由

在这里插入图片描述
在这里插入图片描述

但实际应该动态的显示组件
在这里插入图片描述

<template>
  <div class="app-container">
    <h1>App 根组件</h1>

    <a href="#/home">首页</a>
    <a href="#/movie">电影</a>
    <a href="#/about">关于</a>
    <hr />

    <component :is="comName"></component>
  </div>
</template>

<script>
// 导入组件
import Home from '@/components/Home.vue'
import Movie from '@/components/Movie.vue'
import About from '@/components/About.vue'

export default {
  name: 'App',

  data(){
    return{
      comName: 'Home'
    }
  },

  created(){
    window.onhashchange = () =>{
        console.log('监听到hash地址的变化',location.hash)
        switch(location.hash){
          case '#/home':
            this.comName = 'Home'
            break
          case '#/movie':
            this.comName = 'Movie'
            break
          case '#/about':
            this.comName = 'About'
            break
        }
    }
  },

  // 注册组件
  components: {
    Home,
    Movie,
    About
  }
}
</script>

<style lang="less" scoped>
.app-container {
  background-color: #efefef;
  overflow: hidden;
  margin: 10px;
  padding: 15px;
  > a {
    margin-right: 10px;
  }
}
</style>

4. 安装和配置路由

vue-router安装和配置的步骤。
① 安装vue-router包
② 创建路由模块
③ 导入并挂在路由模块
④ 声明路由链接和占位符

4.1 安装vue-router包

在vue2的项目中安装vue-router的命令如下：

npm i vue-router@3.5.2 -S

4.2 创建路由模块

在src源代码目录下，新建router/index.js路由模块，并初始化如下的代码：

在这里插入图片描述

// src/router/index.js 就是当前项目的路由模块
import Vue from 'vue'
import VueRouter from 'vue-router'

// 导入需要的组件
import Home from '@/components/Home.vue'
import Movie from '@/components/Movie.vue'
import About from '@/components/About.vue'

import Tab1 from '@/components/tabs/Tab1.vue'
import Tab2 from '@/components/tabs/Tab2.vue'

import Login from '@/components/Login.vue'
import Main from '@/components/Main.vue'

// 把 VueRouter 安装为 Vue 项目的插件
// Vue.use() 函数的作用，就是来安装插件的
Vue.use(VueRouter)

// 创建路由的实例对象
const router = new VueRouter({
  // routes 是一个数组，作用：定义 “hash 地址” 与 “组件” 之间的对应关系
  routes: [
    // 重定向的路由规则
    { path: '/', redirect: '/home' },
    // 路由规则
    { path: '/home', component: Home },
    // 需求：在 Movie 组件中，希望根据 id 的值，展示对应电影的详情信息
    // 可以为路由规则开启 props 传参，从而方便的拿到动态参数的值
    { path: '/movie/:mid', component: Movie, props: true },
    {
      path: '/about',
      component: About,
      // redirect: '/about/tab1',
      children: [
        // 子路由规则
        // 默认子路由：如果 children 数组中，某个路由规则的 path 值为空字符串，则这条路由规则，叫做“默认子路由”
        { path: '', component: Tab1 },
        { path: 'tab2', component: Tab2 }
      ]
    },
    { path: '/login', component: Login },
    { path: '/main', component: Main }
  ]
})

// 为 router 实例对象，声明全局前置导航守卫
// 只要发生了路由的跳转，必然会触发 beforeEach 指定的 function 回调函数
router.beforeEach(function(to, from, next) {
  // to 表示将要访问的路由的信息对象
  // from 表示将要离开的路由的信息对象
  // next() 函数表示放行的意思
  // 分析：
  // 1. 要拿到用户将要访问的 hash 地址
  // 2. 判断 hash 地址是否等于 /main。
  // 2.1 如果等于 /main，证明需要登录之后，才能访问成功
  // 2.2 如果不等于 /main，则不需要登录，直接放行  next()
  // 3. 如果访问的地址是 /main。则需要读取 localStorage 中的 token 值
  // 3.1 如果有 token，则放行
  // 3.2 如果没有 token，则强制跳转到 /login 登录页
  if (to.path === '/main') {
    // 要访问后台主页，需要判断是否有 token
    const token = localStorage.getItem('token')
    if (token) {
      next()
    } else {
      // 没有登录，强制跳转到登录页
      next('/login')
    }
  } else {
    next()
  }
})

export default router

4.3 导入并挂在路由模块

import Vue from 'vue'
import App from './App2.vue'


// 导入路由模块，目的：拿到路由的实例对象
// 在进行模块化导入的时候，如果给定的是文件夹，则默认导入这个文件夹下，名字叫做 index.js 的文件
import router from '@/router/index.js'

// 导入 bootstrap 样式
import 'bootstrap/dist/css/bootstrap.min.css'
// 全局样式
import '@/assets/global.css'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  // 在 Vue 项目中，要想把路由用起来，必须把路由实例对象，通过下面的方式进行挂载
  // router: 路由的实例对象
  router
}).$mount('#app')

5. 在路由模块中声明路由的对应关系

5.1 router-view

<router-view> 是 Vue Router 提供的核心组件之一，用于渲染匹配当前路由的组件。它是构建单页面应用（SPA）的关键元素，负责根据路由配置动态加载和显示不同的视图组件。 以下是关于 <router-view> 的详细介绍：

一、<router-view>的作用与功能
​1.动态渲染组件
<router-view> 是一个占位符组件，会根据当前路由路径（URL）自动渲染匹配的组件。例如，当用户访问 /home 时，<router-view> 会渲染 Home 组件。

2.支持嵌套路由
在嵌套路由中，<router-view> 可以嵌套使用，用于渲染子路由对应的组件。例如，父路由 /user 中嵌套子路由 /user/profile，子组件会渲染在父组件的 中。

​3.过渡动画
<router-view> 可以与 Vue 的 <transition> 组件结合，为路由切换添加动画效果，提升用户体验。

​4,命名视图
支持多视图渲染，通过 name 属性指定不同的视图出口。例如，主视图和侧边栏视图可以分别渲染在不同的 <router-view> 中。

二、基本用法
1.简单示例
在 App.vue 中使用 <router-view>渲染匹配的组件：

<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
    </nav>
    <router-view></router-view> <!-- 渲染匹配的组件 -->
  </div>
</template>

2.​嵌套路由示例
在父组件中嵌套 <router-view> 渲染子路由：

<template>
  <div>
    <h2>User Page</h2>
    <router-link to="/user/profile">Profile</router-link>
    <router-link to="/user/posts">Posts</router-link>
    <router-view></router-view> <!-- 渲染子路由组件 -->
  </div>
</template>

3.过渡动画示例
为路由切换添加淡入淡出效果：

<template>
  <div id="app">
    <router-view v-slot="{ Component }">
      <transition name="fade" mode="out-in">
        <component :is="Component" />
      </transition>
    </router-view>
  </div>
</template>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

其他例子

APP.vue

<template>
  <div class="app-container">
    <h1>App2 组件</h1>

    <!-- 当安装和配置了 vue-router 后，就可以使用 router-link 来替代普通的 a 链接了 -->
    <!-- <a href="#/home">首页</a> -->
    <router-link to="/home">首页</router-link>
    <!-- 注意1：在 hash 地址中， / 后面的参数项，叫做“路径参数” -->
    <!-- 在路由“参数对象”中，需要使用 this.$route.params 来访问路径参数 -->

    <!-- 注意2：在 hash 地址中，? 后面的参数项，叫做“查询参数” -->
    <!-- 在路由“参数对象”中，需要使用 this.$route.query 来访问查询参数 -->

    <!-- 注意3：在 this.$route 中，path 只是路径部分；fullPath 是完整的地址 -->
    <!-- 例如： -->
    <!-- /movie/2?name=zs&age=20 是 fullPath 的值 -->
    <!-- /movie/2 是 path 的值 -->
    <router-link to="/movie/1">洛基</router-link>
    <router-link to="/movie/2?name=zs&age=20">雷神</router-link>
    <router-link to="/movie/3">复联</router-link>
    <router-link to="/about">关于</router-link>

    <hr />

    <!-- 只要在项目中安装和配置了 vue-router，就可以使用 router-view 这个组件了 -->
    <!-- 它的作用很单纯：占位符 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style lang="less" scoped>
.app-container {
  background-color: #efefef;
  overflow: hidden;
  margin: 10px;
  padding: 15px;
  > a {
    margin-right: 10px;
  }
}
</style>


// src/router/index.js 就是当前项目的路由模块
import Vue from 'vue'
import VueRouter from 'vue-router'

// 导入需要的组件
import Home from '@/components/Home.vue'
import Movie from '@/components/Movie.vue'
import About from '@/components/About.vue'

import Tab1 from '@/components/tabs/Tab1.vue'
import Tab2 from '@/components/tabs/Tab2.vue'

import Login from '@/components/Login.vue'
import Main from '@/components/Main.vue'

// 把 VueRouter 安装为 Vue 项目的插件
// Vue.use() 函数的作用，就是来安装插件的
Vue.use(VueRouter)

// 创建路由的实例对象
const router = new VueRouter({
  // routes 是一个数组，作用：定义 “hash 地址” 与 “组件” 之间的对应关系
  routes: [
    // 重定向的路由规则
    { path: '/', redirect: '/home' },
    // 路由规则,把#去掉
    { path: '/home', component: Home },
    // 需求：在 Movie 组件中，希望根据 id 的值，展示对应电影的详情信息
    // 可以为路由规则开启 props 传参，从而方便的拿到动态参数的值
    { path: '/movie/:mid', component: Movie, props: true },
    {
      path: '/about',
      component: About,
      // redirect: '/about/tab1',
      children: [
        // 子路由规则
        // 默认子路由：如果 children 数组中，某个路由规则的 path 值为空字符串，则这条路由规则，叫做“默认子路由”
        { path: '', component: Tab1 },
        { path: 'tab2', component: Tab2 }
      ]
    },
    { path: '/login', component: Login },
    { path: '/main', component: Main }
  ]
})

// 为 router 实例对象，声明全局前置导航守卫
// 只要发生了路由的跳转，必然会触发 beforeEach 指定的 function 回调函数
router.beforeEach(function(to, from, next) {
  // to 表示将要访问的路由的信息对象
  // from 表示将要离开的路由的信息对象
  // next() 函数表示放行的意思
  // 分析：
  // 1. 要拿到用户将要访问的 hash 地址
  // 2. 判断 hash 地址是否等于 /main。
  // 2.1 如果等于 /main，证明需要登录之后，才能访问成功
  // 2.2 如果不等于 /main，则不需要登录，直接放行  next()
  // 3. 如果访问的地址是 /main。则需要读取 localStorage 中的 token 值
  // 3.1 如果有 token，则放行
  // 3.2 如果没有 token，则强制跳转到 /login 登录页
  if (to.path === '/main') {
    // 要访问后台主页，需要判断是否有 token
    const token = localStorage.getItem('token')
    if (token) {
      next()
    } else {
      // 没有登录，强制跳转到登录页
      next('/login')
    }
  } else {
    next()
  }
})

export default router

P7 todo

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2321389.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

内网穿透的应用-本地部署ChatTTS教程：Windows搭建AI语音合成服务的全流程配置

内网穿透的应用-本地部署ChatTTS教程：Windows搭建AI语音合成服务的全流程配置

文章目录 前言1. 下载运行ChatTTS模型2. 安装Cpolar工具3. 实现公网访问4. 配置ChatTTS固定公网地址 前言 各位开发者小伙伴们&#xff01;今天我要给大家推荐一个超级火的AI项目——ChatTTS。这个开源文本转语音&#xff08;TTS&#xff09;项目的火爆程度简直让人难以置信&a…
阅读更多...
2025-03-21 Unity 网络基础3——TCP网络通信准备知识

2025-03-21 Unity 网络基础3——TCP网络通信准备知识

文章目录 1 IP/端口类1.1 IPAddress1.2 IPEndPoint 2 域名解析2.1 IPHostEntry2.2 Dns 3 序列化与反序列化3.1 序列化3.1.1 内置类型 -> 字节数组3.1.2 字符串 -> 字节数组3.1.3 类对象 -> 字节数组 3.2 反序列化3.2.1 字节数组 -> 内置类型3.2.2 字节数组 -> 字…
阅读更多...
静态时序分析：SDC约束命令set_min_pulse_width详解

静态时序分析：SDC约束命令set_min_pulse_width详解

相关阅读 静态时序分析https://blog.csdn.net/weixin_45791458/category_12567571.html?spm1001.2014.3001.5482 最小脉冲宽度检查用于确保一个单元的时钟引脚和异步置位/复位引脚的的脉冲宽度满足最小要求&#xff0c;如果违反该要求&#xff0c;则可能出现功能错误。严格意…
阅读更多...
推荐1款简洁、小巧的实用收音机软件,支持手机和电脑

推荐1款简洁、小巧的实用收音机软件,支持手机和电脑

聊一聊 没想到现在还有人喜欢听广播。 我一直以为听广播必须要用那种小广播机才可以。 原来手机或电脑上也是可以的。 今天给大家分享一款可以在电脑和手机上听广播的软件。 软件介绍 龙卷风收音机 电台广播收音机分电脑和手机两个版本。 电脑端无需安装&#xff0c;下载…
阅读更多...
HO与OH差异之Navigation

HO与OH差异之Navigation

在上一篇的内容中我们进一步的了解了Navigation的用法&#xff0c;但是既然写到这里了我就再来扩充一下有关Navigation的内容。 HarmonyOS与OpenHarmony之间有些写法与内容是有差异的&#xff0c;就比如Navigation的跳转。以下内容中HarmonyOS我都简称为HO&#xff0c;OpenHar…
阅读更多...
模糊规则激活方法详解（python实例对比）

模糊规则激活方法详解（python实例对比）

前文我们已经了解了多种隶属函数&#xff0c;如三角形、梯形、高斯型、S型和Z型&#xff0c;并且讨论了模糊推理的基本过程&#xff0c;包括模糊化、规则评估、聚合和解模糊化。我们还了解了如何生成模糊规则的方法&#xff0c;比如专家经验、聚类分析、决策树、遗传算法和ANFI…
阅读更多...
Web前端考核 JavaScript知识点详解

Web前端考核 JavaScript知识点详解

一、JavaScript 基础语法 1.1 变量声明 关键字作用域提升重复声明暂时性死区var函数级✅✅❌let块级❌❌✅const块级❌❌✅ 1.1.1变量提升的例子 在 JavaScript 中&#xff0c;var 声明的变量会存在变量提升的现象&#xff0c;而 let 和 const 则不会。变量提升是指变量的声…
阅读更多...
Spring Boot3 配置文件

Spring Boot3 配置文件

统一配置文件管理 SpringBoot工程下&#xff0c;进行统一的配置管理&#xff0c;你想设置的任何参数&#xff08;端口号、项目根路径、数据库连接信息等等)都集中到一个固定位置和命名的配置文件&#xff08;application.properties或application.yml&#xff09;中&#xff0…
阅读更多...
消防设施操作员考试：巧用时间高效备考攻略

消防设施操作员考试：巧用时间高效备考攻略

合理规划时间是备考消防设施操作员考试的关键&#xff0c;能让学习事半功倍。​ 一、制定详细时间表​ 根据备考时间和考试内容&#xff0c;制定每日、每周的学习计划。将学习时间合理分配给理论知识学习、技能实操练习和模拟考试。例如&#xff0c;每天安排 3 - 4 小时学习理…
阅读更多...
深度学习技术与应用的未来展望：从基础理论到实际实现

深度学习技术与应用的未来展望：从基础理论到实际实现

深度学习作为人工智能领域的核心技术之一&#xff0c;近年来引起了极大的关注。它不仅在学术界带来了革命性的进展&#xff0c;也在工业界展现出了广泛的应用前景。从图像识别到自然语言处理&#xff0c;再到强化学习和生成对抗网络&#xff08;GAN&#xff09;&#xff0c;深度…
阅读更多...
FastStoneCapture下载安装教程（附安装包）专业截图工具

FastStoneCapture下载安装教程（附安装包）专业截图工具

文章目录 前言FastStoneCapture下载FastStoneCapture安装步骤FastStoneCapture使用步骤 前言 在日常工作与学习里&#xff0c;高效截图工具至关重要。本教程将为你呈现FastStoneCapture下载安装教程&#xff0c;助你轻松拥有。 FastStoneCapture下载 FastStone Capture 是一款…
阅读更多...
26考研——图_图的遍历（6）

26考研——图_图的遍历（6）

408答疑 文章目录 三、图的遍历图的遍历概述图的遍历算法的重要性图的遍历与树的遍历的区别图的遍历过程中的注意事项避免重复访问遍历算法的分类遍历结果的不唯一性 广度优先搜索广度优先搜索&#xff08;BFS&#xff09;概述BFS 的特点广度优先遍历的过程示例图遍历过程 BFS …
阅读更多...
C++类与对象的第一个简单的实战练习-3.24笔记

C++类与对象的第一个简单的实战练习-3.24笔记

在哔哩哔哩学习的这个老师的C面向对象高级语言程序设计教程&#xff08;118集全&#xff09;讲的真的很不错 实战一&#xff1a; 情况一&#xff1a;将所有代码写到一个文件main.cpp中 #include<iostream> //不知道包含strcpy的头文件名称是什么,问ai可知 #include<…
阅读更多...
4.1 C#获取目录的3个方法的区别

4.1 C#获取目录的3个方法的区别

C#中常用有如下3个获取目录的方式如下 1.Directory.GetCurrentDirectory():获取当前工作目录&#xff0c;工作目录可能被用户或其他代码修改。尽量少用。&#xff08;似乎只要在运行中使用另存为或者打开某个文件夹&#xff0c;当前工作目录就修改&#xff09; 2.Application…
阅读更多...
oracle数据库（数据库启动关闭/sqlplus登录及基本操作/设置字符集/distinct去重）

oracle数据库（数据库启动关闭/sqlplus登录及基本操作/设置字符集/distinct去重）

目录 1. Oracle数据库启动 2. Oracle数据库关闭 3. sqlplus登录Oracle数据库 3.1 使用sqlplus登录Oracle数据库 3.2 使用sqlplus登录Oracle数据库 3.3 远程登录 3.4 解锁用户 3.5 修改用户密码 3.6 查看当前语言环境 4. sqlplus基本操作 4.1 显示当前用户 4.2 查看当前用户…
阅读更多...
1、SpringBoot集成MyBatis

1、SpringBoot集成MyBatis

&#xff08;1&#xff09;创建SpringBoot项目 &#xff08;2&#xff09;集成MyBatis 导入坐标 <!-- 连接数据库&#xff0c;版本5 --> <dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><versi…
阅读更多...
Linux实操篇-权限管理

Linux实操篇-权限管理

目录 传送门前言一、权限管理概念二、权限管理实战1. Linux文件权限模型1.1 文件的三种基本权限1.2 权限的三类主体 2. 查看文件权限3. 修改文件权限3.1 使用符号方式修改权限3.2 使用数字方式修改权限 4. 特殊权限4.1 SUID&#xff08;Set User ID&#xff09;4.2 SGID&#x…
阅读更多...
阿里开源的免费数据集成工具——DataX

阿里开源的免费数据集成工具——DataX

企业里真实的数据流转是什么样子的呢&#xff1f; 左侧描述了一个企业真实的样子&#xff0c;我们总是需要把数据从一个地方搬到另一个地方&#xff0c;最后就是搬来搬去搬成了一张张解不开的网。 右侧则表达了使用DataX为中心实现数据的同步。 什么是DataX DataX是一个异构…
阅读更多...
【前端】使用 HTML、CSS 和 JavaScript 创建一个数字时钟和搜索功能的网页

【前端】使用 HTML、CSS 和 JavaScript 创建一个数字时钟和搜索功能的网页

文章目录 ⭐前言⭐一、项目结构⭐二、HTML 结构⭐三、CSS 样式⭐四、JavaScript 功能⭐五、运行效果⭐总结 标题详情作者JosieBook头衔CSDN博客专家资格、阿里云社区专家博主、软件设计工程师博客内容开源、框架、软件工程、全栈&#xff08;,NET/Java/Python/C&#xff09;、数…
阅读更多...
地理信息可视化技术大全【WebGIS 教程一】

地理信息可视化技术大全【WebGIS 教程一】

前言&#xff1a; 在当今数据驱动的时代&#xff0c;地理信息技术&#xff08;GIS&#xff09;和空间数据可视化已成为科学研究、商业决策和智慧城市建设的重要工具。随着Web技术的快速发展&#xff0c;基于浏览器端的地图渲染和地理信息处理能力显著增强&#xff0c;各类开源与…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023