第三十一章 Vue之路由(VueRouter)

目录

一、引言

1.1. 路由介绍

二、VueRouter

三、VueRouter的使用

3.1. 使用步骤(5+2)

3.2. 完整代码

3.2.1. main.js

3.2.2. App.vue

3.2.3. Friend.vue

3.2.4. My.vue

3.2.5. Find.vue


一、引言

1.1. 路由介绍

Vue中路由就是路径和组件的映射关系,通过指定路径和组件的对应关系,实现单页面应用中的跳转显示(即页面内容的切换)。

https://music.163.com/#/my/  My.vue组件 

https://music.163.com/#/friend  Friend.vue组件

二、VueRouter

官网地址:https://v3.router.vuejs.org/zh/

我们在Vue的开发过程中,Vue官方已经为我们提供了一个第三方路由插件,因此我们只需要在工程中安装该插件,并通过代码进行引用即可快速实现路由的功能,这个插件就是VueRouter。

VueRouter的作用就是我们前面提到的在修改地址栏路径时,切换显示匹配的组件(即页面内容)

三、VueRouter的使用

3.1. 使用步骤(5+2)

5个基础步骤

① 下载 VueRouter 模块到当前工程

② 引入

③ 安装注册

④ 创建路由对象

⑤ 注入,将路由对象注入到new Vue实例中,建立关联

2个核心步骤

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

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

3.2. 完整代码

3.2.1. main.js

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

3.2.2. 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>

3.2.3. Friend.vue

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

3.2.4. My.vue

<template><div><p>我的音乐</p><p>我的音乐</p><p>我的音乐</p><p>我的音乐</p></div>
</template><script>
export default {// 给组件定义一个多单词名字,避免ESLint校验时抛出组件单个单词命名的校验异常name: 'MyMusic'
}
</script><style></style>

3.2.5. Find.vue

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

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

精准选型跨境客服,网页服务更高效

跨境网页客服系统选型需考虑语言、功能、友好性及合规性。ZohoSalesIQ凭多语言支持、友好界面、移动兼容及数据保障成为优选&#xff0c;助力企业提升客户体验、高效沟通并满足数据安全需求。 一、跨境网页客服系统的重要性 1、提升客户体验 在跨境电商中&#xff0c;客户体验…

Pinia-状态管理

Pinia-状态管理 特点&#xff1a; 1. 轻量和模块化 Pinia 是一个轻量级的状态管理库&#xff0c;支持模块化管理&#xff0c;即可以将应用的状态分成多个 store 以实现更好的组织。使用 Pinia&#xff0c;可以定义多个 store&#xff0c;每个 store 都是一个独立的模块&#x…

【C++】对左值引用右值引用的深入理解(右值引用与移动语义)

&#x1f308; 个人主页&#xff1a;谁在夜里看海. &#x1f525; 个人专栏&#xff1a;《C系列》《Linux系列》 ⛰️ 天高地阔&#xff0c;欲往观之。 ​ 目录 前言&#xff1a;对引用的底层理解 一、左值与右值 提问&#xff1a;左值在左&#xff0c;右值在右&#xff1f;…

go 聊天系统项目-1

1、登录界面 说明&#xff1a;这一节的内容采用 go mod 管理【GO111MODULE‘’】模块&#xff0c;从第二节开始使用【GO111MODULE‘off’】GOPATH 管理模块。具体参见 go 包相关知识 1.1登录界面代码目录结构 代码所在目录/Users/zld/Go-project/day8/chatroom/ 1.2登录界…

Balluff EDI 项目需求分析

电子数据交换&#xff08;EDI&#xff0c;Electronic Data Interchange&#xff09;是一种通过电子方式在不同组织之间交换商业文档的技术和标准。它涉及使用标准格式的电子文档&#xff0c;如订单、发票、运输单据等&#xff0c;以实现自动化的数据传输。这种技术通常依赖于专…

如何在 Ubuntu 上安装和配置 GitLab

简介 GitLab是一个开源应用程序&#xff0c;主要用于托管 Git 仓库&#xff0c;并提供与开发相关的附加功能&#xff08;如问题跟踪&#xff09;。GitLab 可由用户自己的基础架构托管&#xff0c;可灵活部署为开发团队的内部存储库、与用户对接的公共方式或供稿者托管自己项目…

c语言-常量和变量

文章目录 一、常量是什么&#xff1f;&#xff08;1&#xff09;整型常量&#xff1a;&#xff08;2&#xff09;实型常量&#xff1a;&#xff08;3&#xff09;字符常量&#xff1a;&#xff08;4&#xff09;字符串常量&#xff08;5&#xff09;地址常量 二、define 和 con…

【Linux】进程间通信(匿/命名管道、共享内存、消息队列、信号量)

文章目录 1. 进程通信的目的2. 管道2.1 原理2.2 匿名管道2.3 管道通信场景&#xff1a;进程池2.4 命名管道 3. System V共享内存3.1 操作共享内存3.2 使用共享内存通信 4. System V 消息队列&#xff08;了解&#xff09;5. System V 信号量&#xff08;了解&#xff09;5.1 信…

VirtualBox 解决虚拟机Cable Unplugged 无法上网问题

问题描述 VirtualBox 中的虚拟机无法上网&#xff0c;在虚拟机中查看网络设置显示 Cable Unplugged。 解决方案 选择VirtualBox 上方任务栏的控制->设置->网络&#xff0c;勾选接入网线即可解决。

大学适合学C语言还是Python?

在大学学习编程时&#xff0c;选择C语言还是Python&#xff0c;这主要取决于你的学习目标、专业需求以及个人兴趣。以下是对两种语言的详细比较&#xff0c;帮助你做出更明智的选择&#xff1a; C语言 优点&#xff1a; 底层编程&#xff1a;C语言是一种底层编程语言&#x…

【深入浅出】深入浅出Bert(附面试题)

本文的目的是为了帮助大家面试Bert&#xff0c;会结合我的面试经历以及看法去讲解Bert&#xff0c;并非完整的技术细致讲解&#xff0c;介意请移步。 深入浅出】深入浅出Bert&#xff08;附面试题&#xff09; 网络结构Pre-TrainingFine-Tuning 输入编码词向量编码句子编码位置…

thrift rpc 四种类型的服务端的实现详细介绍

thrift rpc 四种类型的服务端的实现详细介绍 这里主要是使用 thrift 开发的时候服务器端的实现&#xff0c;以及 thrift 提供给我们多钟的服务的实现&#xff0c;以及每个实现的服务器的特点和 API 介绍&#xff0c;TServer 主要包含以下几种实现 TSimpleServer 阻塞的但线程…

Python | Leetcode Python题解之第530题二叉搜索树的最小绝对差

题目&#xff1a; 题解&#xff1a; # Definition for a binary tree node. # class TreeNode(object): # def __init__(self, x): # self.val x # self.left None # self.right Noneclass Solution(object):def isValidBST(self, root):"…

[Prometheus学习笔记]从架构到案例,一站式教程

文章目录 Prometheus 优势Prometheus 的组件、架构Prometheus Server 直接从监控目标中或者间接通过推送网关来拉取监控指标&#xff0c;它在本地存储所有抓取到的样本数据&#xff0c;并对此数据执行一系列规则&#xff0c;以汇总和记录现有数据的新时间序列或生成告警。可以通…

抓住亚马逊、shein新品扶持期,利用测评提升搜索排名与销量

亚马逊的卖家们应该意识到&#xff0c;新发布的产品在上线后的2到4周内&#xff0c;通常会获得平台的流量支持。这一阶段被称为“新品流量黄金期”&#xff0c;在此期间&#xff0c;产品的搜索排名和曝光率通常会比平时更高。因此&#xff0c;如何有效利用这一阶段&#xff0c;…

轻松入门WordPress:在Ubuntu上搭建本地网站并配置公网访问地址

文章目录 前言1. 安装WordPress2. 创建WordPress数据库3. 安装相对URL插件4. 安装内网穿透发布网站4.1 命令行方式&#xff1a;4.2. 配置wordpress公网地址 5. 配置WordPress固定公网地址 前言 本文主要介绍如何在Linux Ubuntu系统上使用WordPress搭建一个本地网站&#xff0c…

华为云计算知识总结——及案例分享

目录 一、华为云计算基础知识二、华为云计算相关案例实战案例一&#xff1a;搭建弹性云服务器&#xff08;ECS&#xff09;并部署Web应用案例二&#xff1a;构建基于OBS的图片存储和分发系统案例三&#xff1a;基于RDS的高可用数据库应用案例四&#xff1a;使用华为云DDoS防护保…

银行金融知识竞赛活动策划方案

根据《中国人民银行**市中心支行“创新金融服务&#xff0c;支持经济发展”业务竟赛活动实施方案》安排&#xff0c;中支决定于9月28日举办**市人民银行系统“创新金融服务&#xff0c;支持经济发展”现场业务竞赛&#xff0c;为确保业务竞赛组织工作顺利开展&#xff0c;特制定…

动态规划 01背包(算法)

现有四个物品&#xff0c;小偷的背包容量为8&#xff0c;怎么可以偷得价值较多的物品 如: 物品编号&#xff1a; 1 2 3 4 物品容量&#xff1a; 2 3 4 5 物品价值&#xff1a; 3 4 5 8 记f(k,w) ,当背包容量为w,可以偷k件物品…

引领数字时代:万码优才如何变革IT人才招聘新体验(这里有更精准的推荐)

目录 引领数字时代&#xff1a;万码优才如何变革IT人才招聘新体验引领未来科技&#xff0c;精准链接IT精英精准匹配&#xff0c;高效对接海量资源&#xff0c;覆盖广泛优化体验&#xff0c;简化流程 全面升级&#xff1a;AI赋能数字人才职业成长AI模拟面试职场千问智能简历评估…