当前位置: 首页 > news >正文

Vue 路由

单应用程序

SPA - Single Page Application

所有功能在一个html页面上实现

单页面应用 多用于 系统类网站/内部网站/文档类网站/移动端站点  

多页面应用 多用于 公司官网/电商类网站

路由

单页面应用按需更新页面,需要明确访问路径组件的对应关系

Vue中的路由就是路由和组件的映射关系

VueRouter的基本使用

作用:修改地址栏路径时,切换显示匹配的组件

说明:Vue官方的一个路由插件,是一个第三方包

Vue2 对应VueRouter3.x 

Vue3 对应 VueRouter4.x

使用步骤

  1. 下载  yarn add vue-router@3.6.5
  2. 引入  import VueRouter from 'vue-router'
  3. 安装注册 Vue.use(VueRouter)
  4. 创建路由对象 const router=new VueRouter()
  5. 注入,将路由对象注入到new Vue实例中,建立关联   

        new Vue({

                render: h => h(App),

                router

        }).$mount('#app')

核心步骤

创建需要的组件(view目录),配置路由规则

配置导航,配置路由出口(路径匹配的组件的显示位置)

效果

代码

Find.vue

<template><div><p>发现音乐</p><p>发现音乐</p><p>发现音乐</p><p>发现音乐</p></div>
</template><script>
export default {name: 'FindMusic'
}
</script><style></style>

 Friend.vue

<template><div><p>我的朋友</p><p>我的朋友</p><p>我的朋友</p><p>我的朋友</p></div>
</template><script>
export default {name: 'MyFriend'
}
</script><style></style>

My.vue

<template><div><p>我的音乐</p><p>我的音乐</p><p>我的音乐</p><p>我的音乐</p></div>
</template><script>
export default {name: 'MyMusic'
}
</script><style></style>

App.vue

<template><div><div class="footer_wrap"><a href="#/find">发现音乐</a><a href="#/my">我的音乐</a><a href="#/friend">朋友</a></div><div class="top"><!-- 路由出口 → 匹配的组件所展示的位置 --><router-view></router-view></div></div>
</template><script>
export default {};
</script><style>
body {margin: 0;padding: 0;
}
.footer_wrap {position: relative;left: 0;top: 0;display: flex;width: 100%;text-align: center;background-color: #333;color: #ccc;
}
.footer_wrap a {flex: 1;text-decoration: none;padding: 20px 0;line-height: 20px;background-color: #333;color: #ccc;border: 1px solid black;
}
.footer_wrap a:hover {background-color: #555;
}
</style>

 main.js

import Vue from 'vue'
import App from './App.vue'// 路由的使用步骤 5 + 2
// 5个基础步骤
// 1. 下载 v3.6.5
// 2. 引入
// 3. 安装注册 Vue.use(Vue插件)
// 4. 创建路由对象
// 5. 注入到new Vue中,建立关联// 2个核心步骤
// 1. 建组件(views目录),配规则
// 2. 准备导航链接,配置路由出口(匹配的组件展示的位置) 
import Find from './views/Find'
import My from './views/My'
import Friend from './views/Friend'
import VueRouter from 'vue-router'
Vue.use(VueRouter) // VueRouter插件初始化const router = new VueRouter({// routes 路由规则们// route  一条路由规则 { path: 路径, component: 组件 }routes: [{ path: '/find', component: Find },{ path: '/my', component: My },{ path: '/friend', component: Friend },]
})Vue.config.productionTip = falsenew Vue({render: h => h(App),router
}).$mount('#app')

组件目录存放问题

组件分类:页面组件、复用组件

分类放更易维护

页面组件

src/views

页面展示,配合路由使用

复用组件

src/components

展示数据,常用于复用

路由模块封装

相关文章:

Vue 路由

单应用程序 SPA - Single Page Application 所有功能在一个html页面上实现 单页面应用 多用于 系统类网站/内部网站/文档类网站/移动端站点 多页面应用 多用于 公司官网/电商类网站 路由 单页面应用按需更新页面&#xff0c;需要明确访问路径和组件的对应关系 Vue中的路…...

docker-compose-itd和d

docker run -itd和-d的区别 前言&#xff1a; ​ 今天在通过docker-compose启动一基于ubuntu的镜像容器时&#xff0c;发现启动后&#xff0c;容器会一直停止。但是通过docker run -itd是可以正常运行的。基于这个区别&#xff0c;找了一位大神&#xff08;师傅&#xff09;问…...

WordPress MasterStudy LMS插件 SQL注入漏洞复现(CVE-2024-1512)

0x01 产品简介 WordPress和WordPress plugin都是WordPress基金会的产品。WordPress是一套使用PHP语言开发的博客平台。该平台支持在PHP和MySQL的服务器上架设个人博客网站。WordPress plugin是一个应用插件。 0x02 漏洞概述 WordPress Plugin MasterStudy LMS 3.2.5 版本及之…...

初识Vue-组件通信(详解props和emit)

目录 一、组件通信介绍 1.概念 2.作用 3.特点 4.应用 二、组件通信语法 1.Props 1.1.在子组件中声明 props 1.2.在父组件中传递数据 2.Emit 2.1.在子组件中触发事件 2.2.在父组件中监听事件 三、应用实例 1. 购物车组件 2. 表单数据处理 四、总结 一、组件通信介…...

二叉树的前序、中序、后序遍历的C++实现

二叉树的前序、中序、后序 遍历属于深度优先搜索方式&#xff0c;本文使用递归法实现前序、中序、后序的遍历方法&#xff0c;代码如下&#xff1a; #include <iostream> #include <vector>struct TreeNode{int val;TreeNode* left;TreeNode* right;TreeNode(int …...

golang中数组array和切片slice的区别

go语言中最常用的数据结构 数组array 和 切片 slice的区别对比&#xff1a; 定义和初始化&#xff1a; 数组&#xff1a; [size]类型 切片&#xff1a; []类型 &#xff0c; 数组变量[low:high] var arr1 [3]string{"a", "b", "c"} //…...

LSM-Tree 原理分析

深入浅出分析LSM树&#xff08;日志结构合并树&#xff09; - 知乎 写得太好了&#xff0c;留下记录。便于复习。 LSM树详解 - 知乎 多了点点内容&#xff0c;也看看吧。...

【代码随想录37期】Day01 二分查找 + 移除元素

二分查找 力扣704 贴一下之前的笔记&#xff1a; 没想到一下子写不出来&#xff0c;忘记什么是二分法了&#xff0c;这里回顾一下&#xff1a; 「二分查找 binary search」是一种基于分治策略的高效搜索算法。 它利用数据的有序性&#xff0c;每轮减少一半搜索范围&#xff…...

GitPython 使用教程

GitPython 使用教程 GitPython 是一个用于与 Git 版本控制系统进行交互的 Python 库。它提供了简单的接口&#xff0c;让你可以通过 Python 代码执行 Git 命令和操作 Git 仓库。 1. 安装 GitPython 你可以使用 pip 在命令行中安装 GitPython&#xff1a; pip install gitpy…...

MATLAB 基于规则格网的点云抽稀方法(自定义实现)(65)

MATLAB 基于规则格网的点云抽稀方法(自定义实现)(65) 一、算法介绍二、算法实现1.代码2.结果一、算法介绍 海量点云的处理,需要提前进行抽稀预处理,相比MATLAB预先给出的抽稀方法,这里提供一种基于规则格网的自定义抽稀方法,步骤清晰,便于理解抽稀内涵, 主要涉及到使…...

论文阅读】 ICCV-2021-3D Local Convolutional Neural Networks for Gait Recognition

motivation :现有方法方法无法准确定位身体部位&#xff0c;不同的身体部位可以出现在同一个条纹(如手臂和躯干)&#xff0c;一个部分可以出现在不同帧(如手)的不同条纹上。其次&#xff0c;不同的身体部位具有不同的尺度&#xff0c;即使是不同帧中的同一部分也可以出现在不同…...

同一局域网如何从Windows系统拷贝文件到银河麒麟系统

1. 先将Windows下的、被拷贝文件所在文件夹设置为共享目录&#xff1a;在文件夹上单击右键选择“属性”菜单&#xff0c;弹出如下对话框&#xff1a; 按数字顺序单击鼠标左键&#xff0c;弹出如下对话框&#xff1a; 并将权限开放为Everyone&#xff0c;单击“共享”按钮。 在…...

2024年华为OD机试真题-数的分解-(C++)-OD统一考试(C卷D卷)

题目描述: 给定一个正整数n,如果能够分解为m(m > 1)个连续正整数之和,请输出所有分解中,m最小的分解。 如果给定整数无法分解为连续正整数,则输出字符串"N"。 输入描述: 输入数据为一整数,范围为(1, 2^30] 输出描述: 比如输入为: 21 输出: 21=10+11 补…...

vue-img-cutter 图片裁剪详解

前言&#xff1a;vue-img-cutter 文档&#xff0c;本文档主要讲解插件在 vue3 中使用。 一&#xff1a;安装依赖 npm install vue-img-cutter # or yarn add vue-img-cutter # or pnpm add vue-img-cutter 二&#xff1a;构建 components/ImgCutter.vue 组件 <script se…...

PCL 点云中的平面点云提取

平面点云提取 一. 索引提取1.1 算法概念1.2 算法流程1.3 主要函数二.代码示例三.结果示例一. 索引提取 1.1 算法概念 平面点云提取:是指从点云数据中提取出属于平面的点的过程。 1.2 算法流程 使用pcl::SACSegmentation类进行点云分割的基本步骤如下: 创建一个pcl::SACSegm…...

4.用python爬取保存在text中的格式为m3u8的视频

文章目录 一、爬取过程详解1.寻找视频的m3u8链接2.从网页源码中寻找视频的m3u8链接的第二部分内容3.从视频的m3u8链接获取视频 二、完整的代码 一、爬取过程详解 1.寻找视频的m3u8链接 这个文档承接了爬虫专栏的 第一节.python爬虫爬取视频网站的视频可下载的源url&#xff0…...

240503-关于Unity的二三事

240503-关于Unity的二三事 1 常用快捷键 快捷键描述CtrlP播放/停止Ctrl1打开Scene窗口Ctrl2打开Game窗口Ctrl3打开Inspect窗口Ctrl4打开Hierarchy窗口Ctrl5打开Project窗口Ctrl6打开Animation窗口 2 关联VisualStudio2022 3 节约时间&#xff1a;将最新声明的参数移动到最上…...

顺序栈的操作

归纳编程学习的感悟&#xff0c; 记录奋斗路上的点滴&#xff0c; 希望能帮到一样刻苦的你&#xff01; 如有不足欢迎指正&#xff01; 共同学习交流&#xff01; &#x1f30e;欢迎各位→点赞 &#x1f44d; 收藏⭐ 留言​&#x1f4dd;既然选择了远方&#xff0c;当不负青春…...

STM32 各外设GPIO配置

高级定时器TIM1/TIM8 通用定时器TIM2/3/4/5 USART SPI I2S I2C接口 BxCAN SDIO ADC/DAC 其它I/O功能...

React-hooks相关知识点总结

前言 随着函数式组件的不断流行&#xff0c;React从类式组件走上了函数式组件的时代&#xff0c;那么在新的React函数式编程中&#xff0c;hooks也成为了这个时期最广泛使用的一种方式。现在让我们总结下react hooks吧。 Hooks 是什么 react-hooks是react16.8以后&#xff0c…...

《Qt C++ 与 OpenCV:解锁视频播放程序设计的奥秘》

引言:探索视频播放程序设计之旅 在当今数字化时代,多媒体应用已渗透到我们生活的方方面面,从日常的视频娱乐到专业的视频监控、视频会议系统,视频播放程序作为多媒体应用的核心组成部分,扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上,用户都期望…...

相机Camera日志实例分析之二:相机Camx【专业模式开启直方图拍照】单帧流程日志详解

【关注我&#xff0c;后续持续新增专题博文&#xff0c;谢谢&#xff01;&#xff01;&#xff01;】 上一篇我们讲了&#xff1a; 这一篇我们开始讲&#xff1a; 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下&#xff1a; 一、场景操作步骤 操作步…...

React Native在HarmonyOS 5.0阅读类应用开发中的实践

一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强&#xff0c;React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 &#xff08;1&#xff09;使用React Native…...

江苏艾立泰跨国资源接力:废料变黄金的绿色供应链革命

在华东塑料包装行业面临限塑令深度调整的背景下&#xff0c;江苏艾立泰以一场跨国资源接力的创新实践&#xff0c;重新定义了绿色供应链的边界。 跨国回收网络&#xff1a;废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点&#xff0c;将海外废弃包装箱通过标准…...

使用 SymPy 进行向量和矩阵的高级操作

在科学计算和工程领域&#xff0c;向量和矩阵操作是解决问题的核心技能之一。Python 的 SymPy 库提供了强大的符号计算功能&#xff0c;能够高效地处理向量和矩阵的各种操作。本文将深入探讨如何使用 SymPy 进行向量和矩阵的创建、合并以及维度拓展等操作&#xff0c;并通过具体…...

鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南

1. 项目概述 本跑酷小游戏基于鸿蒙HarmonyOS 5开发&#xff0c;使用DevEco Studio作为开发工具&#xff0c;采用Java语言实现&#xff0c;包含角色控制、障碍物生成和分数计算系统。 2. 项目结构 /src/main/java/com/example/runner/├── MainAbilitySlice.java // 主界…...

代理篇12|深入理解 Vite中的Proxy接口代理配置

在前端开发中,常常会遇到 跨域请求接口 的情况。为了解决这个问题,Vite 和 Webpack 都提供了 proxy 代理功能,用于将本地开发请求转发到后端服务器。 什么是代理(proxy)? 代理是在开发过程中,前端项目通过开发服务器,将指定的请求“转发”到真实的后端服务器,从而绕…...

Python ROS2【机器人中间件框架】 简介

销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...

用机器学习破解新能源领域的“弃风”难题

音乐发烧友深有体会&#xff0c;玩音乐的本质就是玩电网。火电声音偏暖&#xff0c;水电偏冷&#xff0c;风电偏空旷。至于太阳能发的电&#xff0c;则略显朦胧和单薄。 不知你是否有感觉&#xff0c;近两年家里的音响声音越来越冷&#xff0c;听起来越来越单薄&#xff1f; —…...

AI病理诊断七剑下天山,医疗未来触手可及

一、病理诊断困局&#xff1a;刀尖上的医学艺术 1.1 金标准背后的隐痛 病理诊断被誉为"诊断的诊断"&#xff0c;医生需通过显微镜观察组织切片&#xff0c;在细胞迷宫中捕捉癌变信号。某省病理质控报告显示&#xff0c;基层医院误诊率达12%-15%&#xff0c;专家会诊…...