VueRouter的介绍:什么是路由呢?VueRouter的作用及使用,VueRouter的使用分为5个步骤和特定的2步

1.什么是路由呢?

路由就是路径和组件之间的映射关系,当我们路径变化的时候,就要切换对应的组件。

在前端中解决路径与组件之间的映射关系,官方提供了VueRouter这个插件

2.VueRouter的作用及使用

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

VueRouter的使用分为5个步骤和特定的2步

3.下面是固定的5步:

1.下载相关插件VueRouter(本次用的都是Vue2)

使用下方命令:

npm i vue-router@3.6.5

当然 如果你曾经下载过yarn,也可以用下方命令

yarn add vue-router@3.6.5
2.引入(下面的都是在main.js中使用)
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')

 

 

 

4.下面的是自定义的两步,也是核心的两步

1.创建需要的组件(在views目录中),配置路由规则

这里有一个注意点:

为了防止命名规则报错,添加了name 

在main.js中配置规则

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







import Find from './components/views/Find.vue'
import Friend from './components/views/Friend.vue'
import My from './components/views/My.vue'

import VueRouter from 'vue-router'


Vue.config.productionTip = false



Vue.use(VueRouter)


const router=new VueRouter({
  //route是路径的意思,routes这里表示的是很多的路由规则
  //每一个路由规则都是一个对象,{path:路径,component:组件}
  //两个核心配置:path和 component,必填项
  routes:[
    {path:'/find',component:Find},
    {path:'/friend',component:Friend},
    {path:'/my',component:My},

  ]
})



new Vue({
  render: h => h(App),
  router
}).$mount('#app')

2.配置导航,配置路由出口(配置匹配的组件显示位置)
<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></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>

效果图

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

基于单片机手机屏蔽器系统仿真设计

**单片机设计介绍&#xff0c;基于单片机手机屏蔽器系统仿真设计 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机手机屏蔽器系统的仿真设计主要涉及到手机信号屏蔽的原理、单片机控制逻辑设计、仿真软件的选择与使用以…

太厉害了,不愧是字节出来的。

&#x1f345; 视频学习&#xff1a;文末有免费的配套视频可观看 &#x1f345; 点击文末小卡片 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 前段时间公司缺人&#xff0c;也面了许多测试&#xff0c;一开始瞄准的就是中级水准&#xff0c…

DolphinScheduler 答案整理,最新面试题

DolphinScheduler的架构设计是怎样的&#xff1f; DolphinScheduler的架构设计主要分为四个层次&#xff1a;前端界面层、API服务层、调度层和执行层。 1、前端界面层&#xff1a; 提供任务的定义、流程的设计、监控等功能&#xff0c;用户通过前端界面操作整个系统。 2、AP…

【AN】简单的实现点击播放影片剪辑再点击暂停的功能

动画故事背景 一个影片剪辑&#xff0c;里面做了一个动画。我希望影片剪辑一开始是暂停的&#xff0c;按钮点击后开始播放&#xff0c;再次点击就暂停&#xff01; 下图那个花瓣就是影片剪辑&#xff0c;里面有个掉落的路径引导动画&#xff01; 1.首先给花瓣影片剪辑一个实例…

恭贺格雷勒管业入围2024进口管道十大品牌

恭贺格雷勒管业入围2024进口管道十大品牌 2024进口管道十大品牌网络评选再次成功举办。格雷勒管道凭借优异的产品质量&#xff0c;再次成功入围。 格雷勒隶属于格勒菲德进出口贸易&#xff08;上海&#xff09;有限公司。德国【格雷勒】在总部德国杜塞尔多夫设置了专业实验室&a…

Master节点快照回退遇到的容器不存在的问题

这次遇到的问题说起来有点扯&#xff0c;k8s集群出了点问题&#xff0c;kuboard无法访问&#xff0c;查看容器状态后&#xff0c;初始问题简单的以为是kuboard出问题了&#xff0c;理论上来说重新安装kuboard即可&#xff0c; 由此问题引发的系统bug&#xff0c;导致master节点…

【算法】第二篇 大衍数列

导航 1. 简介2. 数列特征3. 代码演示1. 简介 大衍数列,来源于《乾坤谱》中对易传“大衍之数五十”的推论。主要用于解释中国传统文化中的太极衍生原理。数列中的每一项,都代表太极衍生过程中,曾经经历过的两仪数量总和。是中华传统文化中隐藏着的世界数学史上第一道数列题。…

本地运行大模型,需要什么样的配置?

本地运行大模型有多爽&#xff1f;只有用过了才知道。 那是一种顺畅、自由的感觉。 比如使用那些主流大模型&#xff0c;最常见的就是网络问题&#xff0c;如 IP 受限&#xff0c;或者服务器压力过大导致的延迟等等。 使用本地大模型&#xff0c;真的是像和人自然交谈那么顺…

LeetCode第十五题:三数之和【15/1000 python】

&#x1f464;作者介绍&#xff1a;10年大厂数据\经营分析经验&#xff0c;现任大厂数据部门负责人。 会一些的技术&#xff1a;数据分析、算法、SQL、大数据相关、python 作者专栏每日更新&#xff1a; LeetCode解锁1000题: 打怪升级之旅 LeetCode解锁1000题: 打怪升级之旅htt…

RabbitMQ 消息重复消费问题

RabbitMQ 消息重复消费问题 解决消息重复消费问题 解决消息重复消费问题 需要在消费端考虑消息的幂等性&#xff1a; 幂等性&#xff1a;对一个接口的多次调用和一次调用得到的结果都是一样的 使用数据库的唯一越苏保证幂等性。

应用程序无法正常启动怎么办,应用程序无法正常启动解决方法

电脑使用过程中会碰到各种问题&#xff0c;比如说&#xff0c;有些时候打开应用可能会失败&#xff0c;与此同时还会出现某些提示。最近有用户就遇到了打开软件就提示“应用程序无法正常启动0xc000007b”&#xff0c;这个问题是很常见的&#xff0c;一般是某部分组件损坏导致的…

LeetCode刷题之105. 从前序与中序遍历序列构造二叉树

文章目录 1.题目描述2. 分析2.1 前序遍历2.1.1 什么是前序遍历&#xff1f;2.1.2 前序遍历有什么特点&#xff1f; 2.2 中序遍历2.2.1 什么是中序遍历2.2.2 中序遍历有什么特点&#xff1f; 2.3 后序遍历2.3.1 什么是后序遍历&#xff1f;2.3.2 特点 2.4 总结 3. 解法 1.题目描…

【算法基础】选择排序与冒泡排序的思想与实现

文章目录 1. 选择排序1.1 思想1.2 实现 2. 冒泡排序2.1 思想2.2 实现 1. 选择排序 1.1 思想 选择排序的思想很简单&#xff0c;如上图所示。在每一次遍历子数组的过程中&#xff0c;选择最小的和子数组的第一位交换。子数组的选择从一开始的整个数组&#xff0c;到后面范围逐渐…

Vue2(十四):路由的使用及注意点、嵌套路由、路由的query和params参数、props配置

一、路由的简介 vue-rooter&#xff1a;是vue的一个插件库&#xff0c;专门用来实现SPA应用 1.对SPA应用的理解 1、单页 Web 应用&#xff08;single page web application&#xff0c;SPA&#xff09;。 2、整个应用只有一个完整的页面 index.html。 3、点击页面中的导航链…

CVE-2023-2928 DedeCMS 文件包含漏洞getshell 漏洞分析

DedeCMS&#xff08;也称为织梦CMS&#xff09;是一款基于PHPMySQL的开源内容管理系统。 在 DedeCMS 5.7.106 及之前的版本中发现一个漏洞。它已被宣布为关键。受此漏洞影响的是未知功能的文件uploads/dede/article_allowurl_edit.php。对参数 allurls 的操作会导致代码注入。…

近期整理的前端面试问题大集合【附带答案版】

目录 1、vue的双向绑定原理是什么&#xff1f;里面的关键点在哪里&#xff1f; 2、实现水平垂直居中的方式&#xff1f; 3、常用伪元素有哪一些&#xff1f; 4、移动端如何适配不同屏幕尺寸&#xff1f; 5、本地存储有哪一些&#xff1f;他们三者有什么区别&#xff1f; …

智慧乡村建设探索:数字乡村引领农村发展新方向

目录 一、智慧乡村建设的内涵与意义 二、数字乡村的发展现状 三、数字乡村引领农村发展的新方向 &#xff08;一&#xff09;推动农业现代化&#xff0c;提升农业生产效率 &#xff08;二&#xff09;培育农村新业态&#xff0c;促进农村产业升级 &#xff08;三&#xf…

陶瓷、高频、普通PCB板材有什么不同?

在电子制造中&#xff0c;印刷电路板&#xff08;PCB&#xff09;板材的选择很重要&#xff0c;将直接决定电路板的性能、成本和适用领域&#xff0c;按照市场上应用最广泛的PCB板材&#xff0c;可分为陶瓷、高频及普通&#xff0c;它们三个有什么不同&#xff1f; 1、材质陶瓷…

COTR 网络(图像匹配)

COTR 网络&#xff08;图像匹配&#xff09; 摘要Abstract1. COTR网络1.1 文献摘要1.2 研究背景1.3 COTR网络架构1.4 创新点1.5 实验1.5.1 数据集1.5.2 具体实施1.5.3 实验数据 1.6 结论 2. COTR模型代码实现总结 摘要 本周学习了图像匹配方向的COTR网络模型&#xff0c;COTR通…