[VUE]3-路由

news2024/9/24 1:20:53

目录

  • 路由 Vue-Router
  • 1、Vue-Router 介绍
  • 2、路由配置
  • 3、嵌套路由
    • 3.1、简介
    • 3.2、实现步骤
    • 3.3、⭐注意事项
  • 4、⭐router-view标签详解

​🍃作者介绍：双非本科大三网络工程专业在读，阿里云专家博主，专注于Java领域学习，擅长web应用开发、数据结构和算法，初步涉猎Python人工智能开发和前端开发。
🦅主页：@逐梦苍穹
📕所属专栏：前端（专栏的其他文章，详见文末❀）
🍔您的一键三连，是我创作的最大动力🌹

路由 Vue-Router

1、Vue-Router 介绍

vue 属于单页面应用，所谓路由，就是根据浏览器路径不同，用不同的视图组件替换这个页面内容。
不同的访问路径，对应不同的页面展示。

在vue应用中使用路由功能，需要安装Vue-Router：
image.png
image.png
image.png
注：创建完带有路由功能的前端项目后，在工程中会生成一个路由文件，如下所示：
image.png
关于路由的配置，主要就是在这个路由文件中完成的。
为了能够使用路由功能，在前端项目的入口文件main.js中，创建Vue实例时需要指定路由对象：
image.png

2、路由配置

首先了解一下路由组成：

  • VueRouter：路由器，根据路由请求在路由视图中动态渲染对应的视图组件
  • <router-link>：路由链接组件，浏览器会解析成
  • <router-view>：路由视图组件，用来展示与路由路径匹配的视图组件

具体配置方式：
1、在路由文件/router/index.js中配置路由路径和视图的对应关系：

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'

Vue.use(VueRouter)

//维护路由表，某个路由路径对应哪个视图组件
const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
  ,
  {
    path: '/404',
    component: () => import('../views/404View.vue')
  },
  {
    path: '*',
    redirect: '/404'
  }
]

const router = new VueRouter({
  routes
})

export default router

2、在视图组件中配置 router-link标签，用于生成超链接

<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |
<router-link to="/test">Test</router-link> |

image.png
3、在视图组件汇总配置router-view标签
image.png
要实现路由跳转，可以通过标签式和编程式两种：

  • 标签式：About
  • 编程式：this.$router.push(‘/about’)

问题思考： 如果用户访问的路由地址不存在，该如何处理？
可以通过配置一个404视图组件，当访问的路由地址不存在时，则重定向到此视图组件，具体配置如下：

{
  path: '/404',
  component: () => import('../views/404View.vue')
},
{
  path: '*',
  redirect: '/404' //重定向
}

3、嵌套路由

3.1、简介

嵌套路由：组件内要切换内容，就需要用到嵌套路由（子路由），效果如下：
在App.vue视图组件中有标签，其他视图组件可以展示在此
ContainerView.vue组件可以展示在App.vue视图组件的位置

ContainerView.vue组件进行了区域划分（分为上、左、右），在右边编写了标签，点击左侧菜单时，可以将对应的子视图组件展示在此

3.2、实现步骤

第一步：安装并导入 elementui，实现页面布局（Container 布局容器）—ContainerView.vue：

<template>
  <el-container>
    <el-header>Header</el-header>
    <el-container>
        <el-aside width="200px">
        </el-aside>
        <el-main>
        </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {

}
</script>

<style>
.el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }

  body > .el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
</style>

第二步：提供子视图组件，用于效果展示 ->P1View.vue、P2View.vue、P3View.vue：

<template>
  <div>
    这是P1 View
  </div>
</template>

<script>
export default {

}
</script>

<style>
.el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }

  body > .el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
</style>

第三步：在 src/router/index.js 中配置路由映射规则（嵌套路由配置）

{
  path: '/c',
    component: () => import('../views/container/ContainerView.vue'),
    //嵌套路由（子路由），对应的组件会展示在当前组件内部
    children: [//通过children属性指定子路由相关信息（path、component）
    {
      path: '/c/p1',
      component: () => import('../views/container/P1View.vue')
    },
    {
      path: '/c/p2',
      component: () => import('../views/container/P2View.vue')
    },
    {
      path: '/c/p3',
      component: () => import('../views/container/P3View.vue')
    }
  ]
}

第四步：在ContainerView.vue 布局容器视图中添加，实现子视图组件展示

<el-main>
    <router-view/>
</el-main>

第五步：在ContainerView.vue 布局容器视图中添加，实现路由请求

<el-aside width="200px">
    <router-link to="/c/p1">P1</router-link><br>
    <router-link to="/c/p2">P2</router-link><br>
    <router-link to="/c/p3">P3</router-link><br>
</el-aside>

注意：子路由变化，切换的是【ContainerView 组件】中 部分的内容
问题思考：
1.对于前面的案例，如果用户访问的路由是 /c，会有什么效果呢？

如何实现在访问 /c 时，默认就展示某个子视图组件呢？
配置重定向，当访问/c时，直接重定向到/c/p1即可，如下配置：
image.png

3.3、⭐注意事项

  1. 子路由的路径不需要以 / 开头。因为以 / 开头的路径将会被视为根路径。
  2. 子路由的完整路径是由其所有的祖先路由的路径和自己的路径拼接而成的。例如，/user/:id/profile 路径是由 /user/:id 和 profile 拼接而成的。
  3. 子路由的写法，要么"/父/子"，要么"子"：
    image.png
    更多关于嵌套路由的信息，你可以查阅Vue Router官方文档。

4、⭐router-view标签详解

<router-view/> 是 Vue Router 的一个核心组件，它是一个功能性的组件，用于渲染匹配的路由组件。
当你的应用访问一个路由路径时，Vue Router 会查找与该路径匹配的路由配置，然后将该路由配置中的组件渲染到 <router-view/> 所在的位置。
例如，假设你有以下的路由配置：

const routes = [
  { path: '/home', component: Home },
  { path: '/about', component: About }
]

当你访问 /home 路径时，Home 组件会被渲染到 <router-view/> 所在的位置；当你访问 /about 路径时，About 组件会被渲染到 <router-view/> 所在的位置。
此外，<router-view/> 还可以嵌套使用，以支持显示嵌套路由。在嵌套路由的配置中，子路由的组件将会被渲染到父路由组件内部的 <router-view/> 中。
例如，假设你有以下的嵌套路由配置：

const routes = [
  { 
    path: '/user', 
    component: User,
    children: [
      {
        path: 'profile',
        component: UserProfile
      },
      {
        path: 'posts',
        component: UserPosts
      }
    ]
  }
]

当你访问 /user/profile 路径时，User 组件会被渲染到最外层的 <\router-view/> 中，而 UserProfile 组件会被渲染到 User 组件内部的 <router-view/> 中。

​
⭐​​​​​​​​​​​​​​​​​​​前端的其他文章：
📕 1-创建vue工程
📕 2-vue的基本使用

​

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

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

相关文章

Java并发 - Java中所有的锁

Java并发 - Java中所有的锁

Java 中提供了多种锁机制&#xff0c;用于实现多线程之间的同步和互斥。 1. 乐观锁&悲观锁 1.1 特点 乐观锁&#xff1a;假定多个事务之间很少发生冲突&#xff0c;操作不加锁。发生错误的时候进行回滚或重试。 悲观锁&#xff1a;假定冲突可能频繁发生&#xff0c;先…
阅读更多...
放大镜Scratch-第14届蓝桥杯Scratch省赛真题第3题

放大镜Scratch-第14届蓝桥杯Scratch省赛真题第3题

3. 放大镜&#xff08;50分&#xff09; 评判标准&#xff1a; 10分&#xff1a;满足"具体要求"中的1&#xff09;&#xff1b; 15分&#xff1a;满足"具体要求"中的2&#xff09;&#xff1b; 25分&#xff0c;满足"具体要求"中的3&#xff…
阅读更多...
Cadence Editor 关于画PCB相关内容

Cadence Editor 关于画PCB相关内容

目录 一 新建PCB文件 二 指定封装库 三 导入网表 四 放置器件 五 绘制板框 六 精准定位 七 原理图与PCB的交互 八 飞线设置 九 层管理 布局布线阶段需要显示的层 十 器件位置相关 1 器件选取的基准点 2 旋转 3 对齐 4 把器件移动到底层或顶层 5 锁定与解锁 6…
阅读更多...
C# Entity Framework 中不同的数据的加载方式

C# Entity Framework 中不同的数据的加载方式

延迟加载 延迟加载是指在访问导航属性时&#xff0c;Entity Framework 会自动查询数据库并加载相关数据。这种方式在我们需要访问导航属性时比较方便&#xff0c;因为我们无需手动加载相关数据&#xff0c;而且只会在需要时才会进行查询&#xff0c;从而减少了不必要的开销。但…
阅读更多...
Qt6入门教程 4：Qt Creator常用技巧

Qt6入门教程 4：Qt Creator常用技巧

在上一篇Qt6入门教程 3&#xff1a;创建Hello World项目中&#xff0c;通过创建一个Qt项目&#xff0c;对Qt Creator已经有了比较直观的认识&#xff0c;本文将介绍它的一些常用技巧。 Qt Creator启动后默认显示欢迎页面 创建项目已经用过了&#xff0c;打开项目也很简单&#…
阅读更多...
C语言中关于函数调用的理解

C语言中关于函数调用的理解

理论 关于函数调用的方式有两类&#xff1a;传值调用和传址调用 传值调用&#xff1a;函数的形参和实参分别占有不同的内存块&#xff0c;对形参的修改不会影响实参。 传址调用&#xff1a;把函数外部创建变量的内存地址传递给函数参数的一种调用方式。可以让函数和函数外面…
阅读更多...
基于 STM32 的 MPU6050 姿态计算方法及应用

基于 STM32 的 MPU6050 姿态计算方法及应用

基于STM32的MPU6050姿态计算方法可以通过融合陀螺仪和加速度计的数据来实现。在本文中&#xff0c;我们将介绍通过MPU6050获取姿态数据&#xff0c;并结合姿态解算算法实现姿态估计的方法&#xff0c;并提供相应的代码示例。 1. 硬件连接及库配置 首先&#xff0c;我们需要将…
阅读更多...
uniapp中uview组件库CircleProgress 圆形进度条丰富的使用方法

uniapp中uview组件库CircleProgress 圆形进度条丰富的使用方法

目录 #内部实现 #平台差异说明 #基本使用 #设置圆环的动画时间 #API #Props 展示操作或任务的当前进度&#xff0c;比如上传文件&#xff0c;是一个圆形的进度环。 #内部实现 组件内部通过canvas实现&#xff0c;有更好的性能和通用性。 #平台差异说明 AppH5微信小程…
阅读更多...
静态网页课程设计——贾斯汀比伯歌手介绍（HTML+CSS+JavaScript）

静态网页课程设计——贾斯汀比伯歌手介绍（HTML+CSS+JavaScript）

前言 使用技术&#xff1a;HTMLCSSJS 主要内容&#xff1a;对贾斯汀比伯这名歌手进行介绍&#xff0c;还有他的几首比较经典的歌曲以及视频观看。 简单介绍 本网站是以介绍贾斯汀比伯为主题而展开&#xff0c;主要由首页、《Changes》和音乐视频组成的。首页下面的是对他介绍…
阅读更多...
数据在内存中的存储方式

数据在内存中的存储方式

前言&#xff1a; 期末临近&#xff0c;继续复习&#xff01; 今天要复习的内容是数据在内存中的存储&#xff0c;主要是整型与浮点两种&#xff0c;还有大小端的介绍。 提出问题 打印结果是255 -1 为什么&#xff1f; 首先我们要知道数据都是以二进制的形式存…
阅读更多...
智能的核心依然是哲学的三个基本问题

智能的核心依然是哲学的三个基本问题

智能的发展与哲学的三个基本问题密切相关&#xff0c;作为一个复杂领域&#xff0c;智能涉及到人类认知和行为的模拟与复制&#xff0c;因而也会涉及到哲学的核心问题。 存在论&#xff1a;智能的存在论问题涉及到什么是智能以及智能系统的本质。这包括对于意识、思维和自主性的…
阅读更多...
酷雷曼精彩亮相CMC 2023中国元宇宙大会，助力云上VR直播

酷雷曼精彩亮相CMC 2023中国元宇宙大会，助力云上VR直播

12月23日&#xff0c;2023中关村论坛系列活动——CMC 2023中国元宇宙大会在石景山首钢园冰壶馆成功举办。酷雷曼VR作为元宇宙领域代表企业之一受邀出席会议&#xff0c;分享元宇宙技术研发成果及应用方案&#xff0c;并为大会提供VR直播技术支持。 大咖云集&#xff0c;共商元宇…
阅读更多...
js逆向第13例：猿人学第6题js混淆-回溯赛

js逆向第13例：猿人学第6题js混淆-回溯赛

文章目录 m是加密字符串怎么来的？浏览器环境检测本地运行的js代码任务六：采集全部5页的彩票数据，计算全部中奖的总金额（包含一、二、三等奖） 此题总体难度低于第5题，老规矩还是查看控制台请求地址https://match.yuanrenxue.cn/api/match/6?m=rPRDgpbV3Wd%252FyPfURQAkxK…
阅读更多...
Vue知识总结-中

Vue知识总结-中

VUE-生命周期 生命周期概述 生命周期也常常被称为生命周期回调函数/生命周期函数/生命周期钩子生命周期是Vue在关键时刻帮我们调用的一些特殊名称的函数生命周期函数的名字不能更改,但函数的具体内容是由我们程序员自己编写的生命周期函数中的this指向是vm或组件实例对象 生命周…
阅读更多...
[VUE]5-TypeScript

[VUE]5-TypeScript

目录 1 TypeScript 介绍2、安装3、快速上手4、TypeScript 常用类型4.1 类型标注的位置4.2 字符串、数字、布尔类型4.3 字面量类型4.4 ⭐interface 类型4.5 class 类型 ​&#x1f343;作者介绍&#xff1a;双非本科大三网络工程专业在读&#xff0c;阿里云专家博主&#xff0c;…
阅读更多...
【Leetcode】移除后集合的最多元素数

【Leetcode】移除后集合的最多元素数

目录 &#x1f4a1;题目描述 &#x1f4a1;思路 &#x1f4a1;总结 100150. 移除后集合的最多元素数 &#x1f4a1;题目描述 给你两个下标从 0 开始的整数数组 nums1 和 nums2 &#xff0c;它们的长度都是偶数 n 。 你必须从 nums1 中移除 n / 2 个元素&#xff0c;同时从 …
阅读更多...
江科大STM32

江科大STM32

目录 STM32简介 STM32简介 我们主要学习的就是STM32的外设。 NVIC&#xff1a;内核里面用于管理中断的设备&#xff0c;比如配置中断优先级这些东西SysTick&#xff1a;内核里面的定时器&#xff0c;主要用来给操作系统提供定时服务的&#xff0c;STM32是可以加入操作系统的&am…
阅读更多...
SSD固态硬盘数据修复方案介绍

SSD固态硬盘数据修复方案介绍

这么多故障的可能&#xff0c;那么固态硬盘SSD的数据修复&#xff0c;到底是否有办法呢&#xff1f;我们这里介绍两种尝试修复的方式&#xff0c;不能保证一定会成功。在你误删除一些文件的时候&#xff0c;可以尝试下&#xff0c;市场也有也有很多的修复软件。 方式1:采用修复…
阅读更多...
【软件测试】概述

【软件测试】概述

《软件缺陷》 定义 &#xff08;从产品内部看&#xff09;软件产品开发或维护过程中存在的错误、毛病等各种问题&#xff08;从产品外部看&#xff09;系统所需要实现的某种功能的失效或违背 表现形式(1) 软件没有实现产品规格说明所要求的功能模块(2) 软件中出现了产品规格说…
阅读更多...
[ffmpeg系列 03] 文件、流地址（视频）解码为YUV

[ffmpeg系列 03] 文件、流地址（视频）解码为YUV

一 代码 ffmpeg版本5.1.2&#xff0c;dll是&#xff1a;ffmpeg-5.1.2-full_build-shared。x64的。 文件、流地址对使用者来说是一样。 流地址(RTMP、HTTP-FLV、RTSP等)&#xff1a;信令完成后&#xff0c;才进行音视频传输。信令包括音视频格式、参数等协商。 接流的在实际…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023