vue2路由(上)

这篇具有很好参考价值的文章主要介绍了vue2路由(上)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

路由的简介

什么是路由?

vue2路由(上)

用生活上的例子,路由器上的接口对应一个主机。

而由key和values组成的映射关系就是路由

vue2路由(上) 主要用于SPA单页面应用

vue2路由(上) 就是根据你端口号后面的路径,看你有没有配置这个页面对应的组件,如果有,那么就展示出来,如果没有对应的组件,那么就不展示

总结:

vue-router的理解

vue的一个插件库,专门用来实现SAP应用

对SPA应用的理解

1. 单页 Web 应用(single page web application,SPA)。

2. 整个应用只有一个完整的页面

3. 点击页面中的导航链接不会刷新页面,只会做页面的局部更新

4. 数据需要通过 ajax 请求获取

1. 什么是路由?

1. 一个路由就是一组映射关系(key - value)

2. key 为路径, value 可能是 function 或 component

2. 路由分类

1. 后端路由:

        1) 理解:value 是 function, 用于处理客户端提交的请求。

        2) 工作过程:服务器接收到一个请求时, 根据请求路径找到匹配的函数 来处理请求, 返回响应数据。

2. 前端路由:

        1) 理解:value 是 component,用于展示页面内容。

        2) 工作过程:当浏览器的路径改变时, 对应的组件就会显示。

路由基本使用

先封装俩个组件

vue2路由(上)

 vue2路由(上)

 在页面就是这样的效果

vue2路由(上)

我们要使用路由,那么需要先下载它需要的包

但是要注意:2022年2月7日以后,vue-fouter的默认版本,为4版本,而且vue-router4只能在vue3中使用,vue-router3才,能用在vue2中

如果强行把vue-router安装到vue2中就会报这样的错误

vue2路由(上)

所有也就是需要安装npm i vue-router@3\

vue2路由(上) 引入并使用路由

vue2路由(上)

vue2路由(上) 使用router-link实现路径的切换,效果类似于a标签 注意路径是用to /about 不要加点 否则路径就变成了127.0.0.1#8081/./about这肯定是错误的 应该是 127.0.0.1#8081/about

vue2路由(上)最终还是变成了a标签 

vue2路由(上)这样就能实现了路由的变化

总结:

1.基本使用

 * 安装vue-router,命令:``npm i vue-router``
* 应用插件:``Vue.use(VueRouter)``
* 编写router配置项:

//引入VueRouter
import VueRouter from 'vue-router'
//引入Luyou 组件
import About from '../components/About'
import Home from '../components/Home'

//创建router实例对象,去管理一组一组的路由规则
const router = new VueRouter({
	routes:[
		{
			path:'/about',
			component:About
		},
		{
			path:'/home',
			component:Home
		}
	]
})

//暴露router
export default router

实现切换(active-class可配置高亮样式)

<router-link active-class="active" to="/about">About</router-link>

指定展示位置

<router-view></router-view>

几个注意点

vue2路由(上)

我们一般将路由组件放在Pages文件夹下,一般路由放在components文件夹下,这么方便管理

vue2路由(上)vue2路由(上) 现在有一个问题,就是我们在使用about组件时,home组件去哪里了呢?是销毁了,还是隐藏起来你?

其实,我们切换的组件是被销毁了 

vue2路由(上)

当我们配置了路由组件,那么在我们身上会多了俩个配置,一个是$route,另一个是$router

 $route:就是我们配置的路由规则

$router:整个页面的路由器,每一个路由都有一个相同的路由器

总结:

1.路由组件通常存放在 ``pages``文件夹,一般组件通常存放在 ``components``文件夹。
2.通过切换,“隐藏”了的路由组件,默认是被销毁掉的,需要的时候再去挂载。
3.每个组件都有自己的 ``$route``属性,里面存储着自己的路由信息。
4.整个应用只有一个router,可以通过组件的 ``$router``属性获取到。

嵌套路由

vue2路由(上)

这个红色的一级路由,而粉色的配置就是二级路由,也是人家里面的

vue2路由(上) 注意的是子路由采用的是children:[]数组的形式,因为它不单单只有一个路由,{path:'路径'}这样还要注意的一点,不能加/,因为vue已经内容帮我们添加好了 

vue2路由(上)

这里router-link中to属性路径必须要写完整

总结 

配置路由规则,使用children配置项:

routes:[
	{
		path:'/about',
		component:About,
	},
	{
		path:'/home',
		component:Home,
		children:[ //通过children配置子级路由
			{
				path:'news', //此处一定不要写:/news
				component:News
			},
			{
				path:'message',//此处一定不要写:/message
				component:Message
			}
		]
	}
]

跳转(要写完整路径):

<router-link to="/home/news">News</router-link>

路由的query参数

vue2路由(上)

三级路由

vue2路由(上) vue2路由(上)

vue2路由(上) 写死的

vue2路由(上) 这种写法动态的传参,to的字符串写法,如果数据太多了,就不好了

因此我们可以用to的对象写法

vue2路由(上)

总结文章来源地址https://www.toymoban.com/news/detail-416427.html

传递参数

<!-- 跳转并携带query参数,to的字符串写法 -->
<router-link :to="/home/message/detail?id=666&title=你好">跳转</router-link>

<!-- 跳转并携带query参数,to的对象写法 -->
<router-link 
	:to="{
		path:'/home/message/detail',
		query:{
		   id:666,
            title:'你好'
		}
	}"
>跳转</router-link>

接收参数:

$route.query.id
$route.query.title

命名路由

就是给路由配置个名字

vue2路由(上)

使用的就是name关键字 

vue2路由(上)就是原先使用path指明路径,太繁杂了。我们可以直接使用name替代

vue2路由(上)

1.作用:可以简化路由的跳转。

2.如何使用

给路由命名:

{
	path:'/demo',
	component:Demo,
	children:[
		{
			path:'test',
			component:Test,
			children:[
				{
                      name:'hello' //给路由命名
					path:'welcome',
					component:Hello,
				}
			]
		}
	]
}

简化跳转:

<!--简化前,需要写完整的路径 -->
<router-link to="/demo/test/welcome">跳转</router-link>

<!--简化后,直接通过名字跳转 -->
<router-link :to="{name:'hello'}">跳转</router-link>

<!--简化写法配合传递参数 -->
<router-link 
	:to="{
		name:'hello',
		query:{
		   id:666,
            title:'你好'
		}
	}"
>跳转</router-link>

路由的params参数

vue2路由(上)

先要到router的js中给它需要的路径下设置占位符

然后的的值就在router下的params下

vue2路由(上)

vue2路由(上)

vue2路由(上)

也就是在路径下的/:id/:name

vue2路由(上)

用对象简写的方式,也就是修改一下参数为params

但是这里有一个坑,也就是不能使用path参数,这样会报错

vue2路由(上) 总结

配置路由,声明接收params参数

{
	path:'/home',
	component:Home,
	children:[
		{
			path:'news',
			component:News
		},
		{
			component:Message,
			children:[
				{
					name:'xiangqing',
					path:'detail/:id/:title', //使用占位符声明接收params参数
					component:Detail
				}
			]
		}
	]
}

 传递参数

<!-- 跳转并携带params参数,to的字符串写法 -->
<router-link :to="/home/message/detail/666/你好">跳转</router-link>

<!-- 跳转并携带params参数,to的对象写法 -->
<router-link 
	:to="{
		name:'xiangqing',
		params:{
		   id:666,
            title:'你好'
		}
	}"
>跳转</router-link>

 特别注意:路由携带params参数时,若使用to的对象写法,则不能使用path配置项,必须使用name配置!

路由的props配置

就是读取参数的时候读取的简单些,不要读取这些重复的参数

vue2路由(上)不可理

此时我们可以使用路由的props来接收

vue2路由(上) 以props形式传,以Deatil来接收

vue2路由(上)

但是这种写法,我们用的比较少,因为我们传入的是死数据

vue2路由(上) vue2路由(上)

 但是不能传递query参数

vue2路由(上)

 总结

作用:让路由组件更方便的收到参数

{
	name:'xiangqing',
	path:'detail/:id',
	component:Detail,

	//第一种写法:props值为对象,该对象中所有的key-value的组合最终都会通过props传给Detail组件
	// props:{a:900}

	//第二种写法:props值为布尔值,布尔值为true,则把路由收到的所有params参数通过props传给Detail组件
	// props:true

	//第三种写法:props值为函数,该函数返回的对象中每一组key-value都会通过props传给Detail组件
	props(route){
		return {
			id:route.query.id,
			title:route.query.title
		}
	}
}

router-link的replace属性

就是路由对浏览器历史记录的影响

浏览器如何保存历史记录

vue2路由(上)

浏览器也就是一个栈,不同的历史记录一条一条的push到内存中,也就是压栈(类似数组的),然后它的指针默认指向的是最上面的那条,你返回上条历史记录,指针就往那条记录指

vue2路由(上) 除了push的操作外,还有replace

vue2路由(上) 新的放进来,旧的被干掉。而默认开启是push模式

vue2路由(上)打开也很简答,也就是添加一个replace属性,当然这是一个简写方式,完整的写法是:replace="true"

总结

  1. * 作用:控制路由跳转时操作浏览器历史记录的模式
  2. * 浏览器的历史记录有两种写入方式:分别为 ``push``和 ``replace``,``push``是追加历史记录,``replace``是替换当前记录。路由跳转时候默认为 ``push``
  3. * 如何开启 ``replace``模式:``<router-link replace .......>News</router-link>`` 

到了这里,关于vue2路由(上)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 思科路由器的故障问题简介

      一、路由器识别问题 1、为了确定原因,第一步将获取同样多关于问题的信息尽可能,以下信息为确定问题的原因是重要的,控制台日志,系统日志信息-如果路由器设置发送日志到系统日志服务器,你可以能得到信息关于发生什么。 2、show technical-support命令是许多不同的命

    2024年02月05日
    浏览(45)
  • 智能路由器开发之OpenWrt简介

    1.1 智能路由器的重要性和应用场景 智能路由器作为网络通信的核心设备,具有重要的地位和广泛的应用场景。传统的路由器主要提供基本的网络连接功能,但随着智能家居、物联网和大数据应用的快速发展,对于更强大、灵活和智能的路由器需求不断增加。 智能路由器的重

    2024年02月09日
    浏览(55)
  • 华为路由器关闭协议的方法简介

      一、TCP建立连接的三次握手过程中,一方向另一方发送的第一个报文设置了SYN位,当某台设备接收到一个请求服务的初始报文时,该设备响应这个报文,发回一个设置了SYN和ACK位的报文,并等待源端来的ACK应答。 二、如果发送方并不回复ACK,主机就会因为超时而结束连接。

    2024年02月05日
    浏览(50)
  • 路由器是什么?路由器有什么用?

    路由器是连接因特网中各局域网、广域网的设备,它会根据信道的情况自动选择和设定路由,以最佳路径,按前后顺序发送信号的设备。 目前路由器已经广泛应用于各行各业,各种不同档次的产品已成为实现各种骨干网内部连接、骨干网间互联和骨干网与互联网互联互通业务

    2024年02月08日
    浏览(38)
  • 灵科静态与动态路由器的简介

      一、首先我们介绍这两者到底是什么 1、静态路由:配置方便,对系统要求较低,适用于拓扑结构简单并且稳定的小型网络,缺点是需人工配置。 2、动态路由:有自己的算法,能过自动适应网络拖布的变化,适用于具有一定数量三层设备的网络,缺点是配置比较复杂,对系

    2024年02月05日
    浏览(41)
  • 路由器是什么东西?路由器是干什么用的?

    路由器是什么东西?虽然这个问题对于大多数人来说都不是一个问题,但是任然有少数缺乏网络基础的朋友,不知道路由器到底是个什么东西,本文就简单的介绍一下。 路由器(Router),是连接局域网与局域网、局域网与广域网(Internet)的一种设备,它会根据信道的情况自

    2024年02月08日
    浏览(38)
  • 小米路由器是什么 小米路由器有什么作用及功能

    近日小米正式发布了小米路由器正式版,并于今天(4月25日)开启首轮抢购,笔者看到不少网友纷纷抢购,但多数朋友只是跟风,并比知道小米路由器是什么,有什么用,是否适合自己等。尽管699元的小米路由器性价比很高(因内置1TB大硬盘),但相比普通不足百元的无线路

    2024年02月06日
    浏览(39)
  • 智能路由器是什么以及智能路由器有什么作用和功能

    继智能手机、智能电视火爆之后,如今智能汽车、智能路由器又成为科技界关注的宠儿,如今华为、小米、极路由器、百度、360等业界巨头均纷纷推出了智能路由器。那么什么是智能路由器,其和普通路由器有哪些区别,其作用又是什么呢?这是近段时间不少朋友所思考的一

    2024年02月06日
    浏览(56)
  • 边缘路由器和普通路由器哪个好 边缘路由器跟路由器有什么区别

    边缘路由器(Edge Router)是指一种专门用于连接企业、数据中心或运营商网络的路由器。它通常被部署在网络的边缘位置,负责将来自不同网络的数据进行转发,实现网络之间的互联和数据交换。边缘路由器在今天的网络中发挥着非常重要的作用。 边缘路由器的定位是负责将

    2024年02月09日
    浏览(45)
  • 思科路由器设置多WAN口的要点简介

      一、多WAN口路由器需要处理的数据很大,所以大多采用能力很强的处理芯片,对于带宽滥用及恶意攻击也起到防止作用,可以更全面地解决带宽升级方面的需求,多WAN路由器的使用目的大体上与单WAN路由器其实是一样的,为连接内部网络和公共网的接口并提供防火墙功能服

    2024年02月05日
    浏览(97)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包