【vue2】对路由的理解

news2025/1/18 6:42:56

1d43f75f092a4050a8ce31e2d85f6868.gif

🥳博       主:初映CY的前说(前端领域)

🌞个人信条:想要变成得到,中间还有做到!

🤘本文核心:vue路由概念、路由写法、路由模式、路由重定向、路由跳转传参方式 

目录

 一、vue路由概念

1.概念:

2.初体验:

二、路由基础

1.路由模式        

2.路由写法

总结手动自动配置区别:

三、路由重定向与二级路

1.路由重定向

2.二级路由

 四、路由跳转传参

1.声明式导航:

2.编程式导航


 一、vue路由概念

1.概念:

确保我们在vue中实现页面跳转到我们所想的页面

2.初体验:

88f51af6257443c5aeb88fa4b47a805a.gif

 可以看到当我们点击不同的组件的时候我们实现了路由的功能:在vue中实现页面的跳转

注意看,当我点击的时候上面地址栏中加载了不同的网页。下面我们来学习下路由的写法

二、路由基础

1.路由模式

路由两种模式

路由书写写法:

在index.js中的router对象中书写

const router = new VueRouter({
  mode: 'history',//默认是hash模式
})

hash模式:

路由例如: http://localhost:8080/#/home

history模式:

路由例如: http://localhost:8080/home


两种模式的区别:

  1. 外观:hash的url有个#符号,history没有,history外观更好看。
  2. 刷新:hash刷新会加载到地址栏对应的页面,history刷新浏览器会重新发起请求,如果服务端没有匹配当前的url,就会出现404页面。
  3. history模式以后上线需要服务器端支持, 否则找的是文件夹

 2.路由写法

 起步 | Vue RouterVue Router3官网介绍: 起步 | Vue Router

①手动配置(较少使用)

  1. 下载与导入vue-router
  2. 导入组件
  3. 创建routes路由规则(路径和页面一一对应)
  4. 创建路由对象
  5. 把路由对象挂载到App.vue
  6. 在页面写路由导航router-link (生成a标签)
  7. 在页面写路由出口router-view (生成占位盒子,用于显示页面内容)

下面开始我们相关文件的创建

1.创建我们的脚手架(此时没有选择Router):

1d386e264033404e9d2e678b516ac38f.png

 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"></div>
  </div>
</template>

<script>
export default {
  methods: {}
}
</script>

<style scoped>
body,
html {
  margin: 0;
  padding: 0;
}
.footer_wrap {
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  width: 100%;
  text-align: center;
  background-color: #333;
  color: #ccc;
}
.footer_wrap a,
span {
  cursor: pointer;
  flex: 1;
  text-decoration: none;
  padding: 20px 0;
  line-height: 20px;
  background-color: #333;
  color: #ccc;
  border: 1px solid black;
}
.footer_wrap a:hover,
span:hover {
  background-color: #555;
}

.top {
  padding-top: 62px;
}

.footer_wrap .router-link-active {
  background-color: #000;
}
</style>

3.在src下面新建views文件夹并创建我们需要的.vue文件

88e582b6196e48c0a1c697bfc26d9869.png

3.1 find.vue

<template>
  <div>
    <div class="nav_main">
      <router-link to="/Ranking">排行</router-link>
      <router-link to="/Recommend">推荐</router-link>
      <router-link to="/SongList">歌单</router-link>
    </div>

    <div style="1px solid red;">
  <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: 'find',
}
</script>

<style scoped>
.nav_main {
  background-color: red;
  color: white;
  padding: 10px 0;
}
.nav_main a {
  text-align: center;
  text-decoration: none;
  color: white;
  font-size: 12px;
  margin: 7px 17px 0;
  padding: 0px 15px 2px 15px;
  height: 20px;
  display: inline-block;
  line-height: 20px;
  border-radius: 20px;
}
.nav_main a:hover {
  background-color: brown;
}
.nav_main .router-link-active{
  background-color: brown;
}
</style>

 3.2 my.vue

<template>
  <div>
    <img src="../assets/my.png" alt="" width="100%">
  </div>
</template>

<script>
export default {
  name: 'my',
};
</script>

<style scoped>

</style>

3.3 friend.vue

<template>
  <div>
    <ul>
      <li>这是当前页面 query 接收到的参数: 
        <span>姓名:{{ $route.query.name }}</span>  --
        <span>年龄:{{$route.query.age}}</span>  
       </li>
      <li>这是当前页面 params 接收到的参数: 
        <!-- <span>姓名:{{ $route.params.name }}</span> -- 
        <span>年龄:{{ $route.params.age }}</span>   -->
       </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'friend',
};
</script>

<style  scoped>

</style>

3.4 notfound.vue

<template>
  <div class="box">
    <h1>这是一个 404 页面</h1>
    <img src="../assets/404.png" alt="">
  </div>
</template>

<script>
export default {
  name: 'notfound',
  data() {
    return {
  
    };
  },

};
</script>

<style scoped>
.box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>

 4.准备图片素材(所有素材可私信博主获取)

3febf3f9755241a3b8bafccedb0f646e.gif

 5.所有准备工作做完现在开始我们的文件配置

 1.下载与导入vue-router

  • npm i vue-router@3.6.5

  • 导入vue-router (在main.js中)

//main.js中导入
// 0.导入路由
import VueRouter from 'vue-router'
// 使用vue的插件,都需要调用Vue.use()
Vue.use(VueRouter)

2.导入组件

@符号代表 /src 文件夹的绝对路径,在脚手架中文件比较多的时候,使用这个@符号会更加的方便

 在main.js中导入

// 导入组件
import find from '@/views/find.vue'
import friend from '@/views/friend.vue'
import my from '@/views/my.vue'
import notfound from '@/views/notfound.vue'

3.创建路由规则

路由规则作用: 设置 url 和 组件 对应的规则

 在main.js中写入

// 路由规则
const routes = [
  { path: '/find', component: find },
  { path: '/friend', name: 'friend', component: friend },
  { path: '/my', component: my },
  { path: '/notfound', component: notfound },
]

4.创建路由对象

 

路由对象: 帮你管理这些路由规则

 在main.js中写入

// 创建路由对象
const router = new VueRouter({
  routes// (缩写) 相当于 routes: routes
})

 5.挂载路由到根组件

挂载到根组件作用:让你的整个应用都有路由功能

 在main.js中写入

// 挂载路由到根组件
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

6.在页面写路由导航router-link

作用与a标签一样实现跳转,好处:当点击链接的时候自带一个专属类名 

在App.vue中我们将传统的a标签进行替换:

4970109a68ec4481b7b4ce6d015fb05e.png

替换a标签原因:便于我们做专属效果 

 我们选中点击的超链接做触发效果:

457bf5ab19d14e1196aae8ebe7fbb272.png

 7在页面写路由出口router-view

占位盒子,用于渲染路由匹配到的组件

(<router-view> : 是vue内置的一个组件,会自动替换成路由匹配的组件 )

0487e6a9e90f47259742157cc9bf927f.png

 

好了一个最最最基本的路由就被我们制作完成啦!下面我们来看看效果:

b90436a4b4b043e0972a686ec5d6c7b9.gif

上述的操作有些许麻烦,下面我们来使用我们开发中常用的自动配置方法

②自动配置(推荐使用)

创建脚手架方式与手动配置类似,唯一不同是此处必须选择Router

8da9a6240ba34b7d8231d7e3d1329023.png

对比手动模式:

b4e1986802914f9682f82f40bd819859.png

 此刻:脚手架已经帮我们创建好了Router路由不需要我们下载与导入vue-router了

只需要写:

  1. 导入组件
  2. 配置路由规则
  3. 路由导航
  4. 路由出口

并且为了进一步的封装我们的配置信息,我们的配置代码将写在router/index.js下,不再是全部写在main.js下。

1.导入组件(index.js中)

import find from '@/views/find.vue'
import friend from '@/views/friend.vue'
import my from '@/views/my.vue'
import notfound from '@/views/notfound.vue'

2.配置路由规则(index.js中)

  { path: '/find', component: find },
  { path: '/friend', name: 'friend', component: friend },
  { path: '/my', component: my },
  { path: '/notfound', component: notfound }

 3.路由导航(直接cv我们之前的App.vue文件)

      <router-link to="/find">发现音乐</router-link>
      <router-link to="/my">我的音乐</router-link>
      <router-link to="/friend">朋友</router-link>

 4.路由出口(App.vue中

    <div class="top">
      <router-view></router-view>
    </div>

效果查看:

a0b3530b690c4a9ca6249c14b002d6b0.gif

 


总结手动自动配置区别:

自动配置省去了一些固定不变的操作,我们不需要写繁琐且固定的代码,只需要写不同的代码。且代码书写的位置都给我们设置好了,我们直接遵守该规范书写代码即可


三、路由重定向与二级路由

1.路由重定向

路由重定向官方文档:重定向和别名 | Vue Router

  • 重定向应用场景: 页面输入根路径/ , 自动跳转到首页

  • 注意点 : 重定向只是修改路径, 还需要单独去设置路由匹配规则

重定向命令:

    {
    path: '/',
    /* 
    (1)重定向只是修改页面路径。  输入 / 会重定向到 /路径
    (2)只有component才会让vue去寻找路由匹配页面。所以设置了重定向,还需要单独设置匹配规则
    */
    redirect: "路径"
  },

1. 就拿我们刚才创建的举例:

bef58f0f03f0422bad9ff7ff552333ca.png

 实现效果:当我在浏览器中打开的时候我没有输入任何路径,vue自动帮我们跳转到了 my.vue这个页面组件

fc6d192e015f4d028f6d8e601a9ab2a1.png

 2.也可以利用重定向来设置当我们路径错误提示404页面:

ec7212bfaf874c898e43147ff21dcb43.png

实现效果:当我任意输入没有匹配的路径,自动帮我们跳转到了notfound.vue这个组件

4544b2c521bc475998d8f3220f43f714.gif

 

2.二级路由

实现页面中存在第二级的跳转

写法(拿我们上述的案例实操,需要素材可私信博主喔):

①在index.js中引入

// 导入二级路由
import Ranking from '@/views/second/Ranking.vue'
import Recommend from '@/views/second/Recommend.vue'
import SongList from '@/views/second/SongList.vue'

②在需要引用的组件中使用:

//格式:
{
    path: '路径', component: 组件名, children: [
//此处填写二级路由的路径信息
]
}  
{
    path: '/find', component: find, children: [
      {path:'/',redirect:'/SongList'},
      { path: '/Ranking', component: Ranking },
      { path: '/Recommend', component: Recommend },
     { path: '/SongList', component: SongList }
    ]
  }

③写路由导航与出口

bde6628a95f54fb2b73ef7ea54cb05f3.png

 查看效果:

fae7f2b60cab46599c9d7a4b142de98a.gif

 可以看到:当我们点击一级路由之后,我们还可以点击二级路由到我们的专属页面中


 四、路由跳转传参

有两种跳转传参方式:

  • 声明式导航
  • 编程式导航

1.声明式导航:

①query写法:

在路径中加参数信息即可

      <router-link to="/路径?参数名=参数值&参数名=参数值</router-link>

接收信息:

在触发的组件中书写{{ $route.query.属性名}}接收

 举个例子:

026595d1cedd4c02ab86a4f99188edd8.png

②params写法:

在index.jsx文件中写:参数名。在需要传递的路由路径中写参数值

47aaff039df84bc990dd7f3f2ad9b74b.png

接收信息:

在触发的组件中书写{{ $route.params.属性名}}接收

 6da470911546454488c229af441d7d78.png

 实现效果:

c2acf124d4cf44fb96dbc98e71d804c1.png

 


2.编程式导航

①query写法:

结构:

      this.$router.push({
        path: '/路径',
        query: { 属性名: '属性值'}
      })

接收信息:

在触发的组件中书写{{ $route.query.属性名}}接收

举个例子:

c55bce2fbbaf4910812fa99a15ef760b.png

 ②params写法

结构:

      this.$router.push({
        name: '我们注册路径的组件名',//写path获取不到值!!!
        query: { 属性名: '属性值'}
      })

 注意点:写path获取不到值,需要用name

接收信息:

在触发的组件中书写{{ $route.params.属性名}}接收

5fa2f0cd7c87446aadd377efaabe0784.png


 

 

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

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

相关文章

Tkinter的Checkbutton控件

Tkinter的Checkbutton是一个有着许多选项的控件&#xff0c;可以一次选择几个选项 使用方法 var1tk.IntVar() var2tk.IntVar() def printf():if (var1.get()1)&(var2.get()0):L.config(text1)elif (var1.get()0)&(var2.get()1):L.config(text2)elif (var1.get()0)&am…

【docker实践遗留问题】解决个人制作镜像在 dockerhub 上拉取缓慢的问题

目录背景正文1. 创建阿里云docker仓库2. 修改本地 pom 文件尾声背景 通过不断实践&#xff0c;发现了一个问题&#xff1a;dockerHub服务器在国外&#xff0c;虽然拉取一些常用依赖时&#xff0c;可以通过更改镜像源的方式来解决&#xff0c;但倘若是自己制作的docker镜像&…

Python3 条件控制

Python 条件语句是通过一条或多条语句的执行结果&#xff08;True 或者 False&#xff09;来决定执行的代码块。 IF-ELSE判断 常用的if-else语句&#xff0c;通常用于二分支结构的条件语句代码。 Python 中用 elif 代替了else if&#xff0c;所以if语句的关键字为&#xff1a…

【机器学习】(西瓜书习题8.5)编程实现Bagging模型,以决策树桩为基学习器,在西瓜数据集3.0a上训练一个Bagging集成,并与教材图8.6进行比较。

&#xff08;1&#xff09;问题理解与分析 编程实现Bagging模型&#xff0c;以决策树桩为基学习器&#xff0c;在西瓜数据集3.0a上训练一个Bagging集成&#xff0c;并与教材图8.6进行比较。 &#xff08;2&#xff09;Bagging算法原理阐述 若想得到泛化性能强的集成&#xf…

6、算术运算符与算术表达式

目录 一、算术运算符 二、算术表达式 三、优先级与结合性 1. 算术运算符的优先级 2. 算术运算符的结合性 四、自增&#xff0f;自减运算符 一、算术运算符 算术运算符包括两个单目运算符&#xff08;正和负&#xff09;和5个双目运算符&#xff08;即乘法、除法、取模、…

ARP渗透与攻防(六)之限制网速攻击

系列文章 ARP渗透与攻防(一)之ARP原理 ARP渗透与攻防(二)之断网攻击 ARP渗透与攻防(三)之流量分析 ARP渗透与攻防(四)之WireShark截获用户数据 ARP渗透与攻防(五)之Ettercap劫持用户流量 ARP限制网速攻击 大家没想到吧&#xff0c;ARP还能限制对方网速。当kali欺骗了网关和受…

Linux-Ubuntu入门到精通之常用终端指令之操作文件目录和文件内容(2)

常用的终端命令 ctrl shift 放大终端窗口的字体显示 ctrl - 缩小终端窗口的字体显示 按 上&#xff0f;下 光标键可以在曾经使用过的命令之间来回切换 如果想要退出选择&#xff0c;并且不想执行当前选中的命令&#xff0c;可以按 ctrl c . ls 常用选项&#xff08;白色…

DFS(四)39. 组合总和 1079. 活字印刷

39. 组合总和 给你一个 无重复元素 的整数数组 candidates 和一个目标整数 target &#xff0c;找出 candidates 中可以使数字和为目标数 target 的 所有 不同组合 &#xff0c;并以列表形式返回。你可以按 任意顺序 返回这些组合。 candidates 中的 同一个 数字可以 无限制重复…

flowable定时任务和表单

流程定义定时激活 &#xff1a; act_re_procdef 的 suspension_status ClassPathResource classPathResource new ClassPathResource("hehe/HistoryDemo01.bpmn20.xml");repositoryService.createDeployment().addInputStream(classPathResource.getFilename(),clas…

【HBase入门】3. HBase数据模型

简介 在HBASE中&#xff0c;数据存储在具有行和列的表中。这是看起来关系数据库(RDBMS)一样&#xff0c;但将HBASE表看成是多个维度的Map结构更容易理解。 { “zzzzz” : “woot”, “xyz” : “hello”, “aaaab” : “world”, “1” : “x”, “aaaaa” : “y” } 术语 表…

MCAL系列介绍05-ICU

本文框架1. 前言2. 基本概念3. ICU采集过程3.1 获取周期占空比3.2 获取边沿数量3.3 获取时间戳4. Autosar系列文章快速链接1. 前言 ICU驱动器是使用Input Capture Uint模块&#xff08;ICU&#xff09;解调PWM信号、计数脉冲、测量频率和占空比、生成简单中断以及唤醒中断的模…

ROS学习寄录之知识学习

1 ROS核心概念 1.1 节点&#xff08;Node&#xff09; &#xff08;1&#xff09;执行具体任务的进程、独立运行的可执行文件 &#xff08;2&#xff09;不同节点可以使用不同的语言&#xff0c;可分布式运行在不同的主机 &#xff08;3&#xff09;节点在系统中的名称必须…

HTML总结

web开发是创建Web页面或App等前端界面呈现给用户的过程。web开发开发是从网页制作演变而来&#xff0c;早期网站主要内容都是静态&#xff0c;用户使用网站的行为也以浏览为主。随着互联网技术的发展&#xff0c;各种终端设备应用程序与用户沟通交互的界面&#xff0c;都是由We…

Java基础 Stream流方法引用异常文件

Stream流 引例 需求&#xff1a;按照下面要求完成集合的创建和遍历 创建一个集合&#xff0c;存储多个字符串元素 1. 把所有以“曹”开头的元素存储到新集合中 2. 把曹开头&#xff0c;长度为3的元素存储到新集合中 List<String> list List.of("曹操", "…

关于2倍图的理解

在电脑端1个css像素1个物理像素 所以一个长宽都是100px的照片&#xff0c;需要100✖100px的物理像素 而在移动端存在多倍图的关系&#xff0c;假如是2倍图的关系 即&#xff1a;1个css像素需要2个物理发光点 假如现在有一个长宽都是100px像素的照片 放在手机上也是长宽也是100…

TCP/IP IP地址概念与应用

作者简介&#xff1a;一名在校云计算网络运维学生、每天分享网络运维的学习经验、和学习笔记。 座右铭&#xff1a;低头赶路&#xff0c;敬事如仪 个人主页&#xff1a;网络豆的主页​​​​​​ 目录 前言 一.什么是IP地址 二.IP地址的组成 三.IP地址分类 A类IP地址 …

雅睿生物在创业板IPO终止:安信证券为保荐人,曾计划募资7.5亿元

近日&#xff0c;深圳证券交易所创业板披露的信息显示&#xff0c;苏州雅睿生物技术股份有限公司&#xff08;下称“雅睿生物”&#xff09;提交了关于撤回首次公开发行股票并在创业板上市申请文件的申请&#xff0c;保荐人提交了撤回保荐的申请。 据贝多财经了解&#xff0c;雅…

Heatmap关键点检测算法

** Heatmap 方法汇总 高斯热图与坐标回归方法探讨 L1与 L2 Loss的对比分析 关键点之热力图Heatmap与坐标FC回归 Heatmap-based和Regression-based 一般来说&#xff0c;我们可以把姿态估计任务分成两个流派&#xff1a;Heatmap-based和Regression-based。 其主要区别在于监…

GROMACS 教程--水中的溶菌酶

GROMACS 教程–水中的溶菌酶 中文教程&#xff1a;http://jerkwin.github.io/ 英文教程&#xff1a;http://www.mdtutorials.com 此示例将指导新用户完成模拟系统的设置过程&#xff0c;该模拟系统在一盒水和离子中包含蛋白质&#xff08;溶菌酶&#xff09;。每个步骤都将包含…

学习3dmax多边形建模挤出操作

新建一个长方体&#xff0c;右键&#xff0c;转换为可编辑多边形&#xff1b; 右键以后&#xff0c;这个Convert To菜单&#xff0c;有时有有时没有&#xff0c;我还没弄清&#xff0c; 操作层级选中如下&#xff0c; 选中挤出命令&#xff0c;Extrude&#xff0c; 挤了一下&a…