第五章 Vue路由

so.far_away

已于 2022-12-20 22:32:40 修改

阅读量290

点赞数

分类专栏： Vue.js笔记文章标签： vue.js 前端 javascript

于 2022-12-15 22:29:13 首次发布

本文链接：https://blog.csdn.net/qq_51580006/article/details/127945870

版权

Vue.js笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

文章目录

5.1初识路由
- 5.1.1后端路由
- 5.1.2前端路由
5.2vue-router
5.3用户登录注册案例
5.4动态路由
5.5嵌套路由
5.6命名路由
5.7命名视图
5.8编程式导航

5.1初识路由

5.1.1后端路由

程序开发中的路由分为后端路由和前端路由
路由的本质就是一种对应关系，比如我们在url地址中输入我们要访问的url地址之后，浏览器就要去请求这个url地址对应的资源
那么url地址和真实的资源之间就有一种对应关系，就是路由
后端路由是由服务器端进行实现的，并完成资源的分发（url与资源/数据的对应关系）
在这里插入图片描述
后端路由通过用户请求的URL分发到具体的处理程序，浏览器每次跳转到不同的URL，都会重新访问服务器。服务器收到请求后，将数据和模板组合，返回HTML页面，或者直接返回HTML模板，由前端JavaScript程序再去请求数据，使用前端模板和数据进行组合，生成最终的HTML页面
浏览器每访问一次新页面的时候，都要向服务器发送请求，然后服务器会响应请求，返回新页面给浏览器，在这个过程中会有一定的网络延迟

5.1.2前端路由

前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做。对于单页面应用SPA来说，主要通过URL中的hash（#号）来实现不同页面之间的切换。hash有一个特点，就是HTTP请求中不会包含hash相关的内容，所以单页面程序中的页面跳转主要用hash来实现
前端路由是依靠hash值（锚点连接）的变化实现的（锚点与组件之间的关系）
在这里插入图片描述
前端路由在访问一个新页面的时候仅仅是变换了一下hash值而已，没有和服务端交互，所以不存在网络延迟，提升了用户体验

5.2vue-router

5.2.1vue-router工作原理

Vue.js官方提供的路由管理器，是一个功能更加强大的前端路由器
它是单页面应用的核心思想之一，就是更新视图而不重新请求页面，简单来说，它在加载页面时，不会加载整个页面，只会更新某个指定的容器中的内容
①hash模式
默认
使用URL的hash来模拟一个完整的URL，当URL改变时，页面不会重新加载
#就是hash符号，中文名为哈希符或者锚点，在hash符号后的值，称为hash值
②history模式
不会出现#号，比较美观
充分利用HTML5 History Interface的history.pushState()来完成URL的跳转而且无须重新加载页面
使用history模式时，需要在路由规则配置中增加mode:‘history’

5.2.2vue-router基本使用

1.3个基本概念
route：表示它是一条路由，单数形式。如“A按钮=>A内容”表示一条route，”B按钮=>B内容”表示另一条route
routes：表示它是一组路由，把route的每一条路由组合起来，形成一个数组。如“[{A按钮=>A内容},{B按钮=>B内容}]”
router：表示它是一个机制，充当管理路由的管理者角色。当用户单击A按钮的时候，router需要到routes中去查找对应的A内容，然后在页面中显示出A内容
在这里插入图片描述
/login要和script里边的path对应，而path对应了component，这个component对应了一个组件，这个组件直接用对象的方式声明即可，例如：var login={template:‘< div>< /div>’}
只有router-link中的to属性和路由规则中定义的路由一样时，才会显示对应的component
router-link中tag默认渲染成a标签，就是一个超链接

5.2.3路由对象属性

路由对象表示当前激活的路由的状态信息，包含了当前URL解析得到的信息，还有URL匹配到的路由记录
路由对象是不可变的，每次成功地导航后都会产生一个新的对象
this. $ro u t er 表示全局路由器对象，项目中通过 ro u t er 路由参数注入路由之后，在任何一个页面都可以通过该属性获取到路由器对象，并调用其 p u s h () 、 g o () 等方法 t hi s .$ route表示当前正在用于跳转的路由对象，可以访问其name、path、query、params等属性
在这里插入图片描述

5.3用户登录注册案例

path:‘/’,redirect:‘/login’：表示重定向，就是刷新页面后跳转的页面
history模式：（无#号）
在这里插入图片描述

5.4动态路由

5.4.1什么是动态路由

动态路由就是可以匹配带有不同参数的uri的路由规则
在vue-router的路由路径中，可以使用动态路径参数给路径的动态部分匹配不同的id
例如：

{path:"/user/:id",component:user}

动态路由在来回切换时，由于它都是指向同一组件，Vue不会销毁再重新创建这个组件，而是复用这个组件
如果想要在组件来回切换时进行一些操作，那就需要在组件内部利用watch来监听$route的变化

watch：{
	$route(to,from){
		console.log(to)//to表示要去的那个组件
		console.log(from)//from表示从哪个组件过来的
	}
}

5.4.2query方式传参

①query传参其实就是通过"?"传参
②传参
例如：
在这里插入图片描述
传参语法：?参数名1=参数值1&参数名2=参数值2
③定义路由

var router=new VueRouter({
	routes:[{path:'/user',component:user}]
})

④获取参数

{{this.$route.query.参数名}}

5.4.3params方式传参

使用params方式不需要通过查询字符串传参，而是将参数放在路径中
①传参
传参语法：/参数值1/参数值2，这里只需要传递值即可
②定义动态路由
动态路由语法 :参数名，以冒号开头就代替动态匹配
如下面案例，:id就会匹配10，:name就会匹配admin
③获取参数

{{$route.params.参数名}}

在这里插入图片描述

5.5嵌套路由

什么是嵌套路由？
是否使用嵌套路由主要是页面结构来决定的，实际项目中的应用界面，通常由多层嵌套的组件组合而成。简言之，嵌套路由就是在路由里面嵌套它的子路由
嵌套子路由的关键属性是children，children也是一组路由，相当于前面讲到的routes，children可以像routes一样的去配置路由数组。每一个子路由里面可以嵌套多个组件，子组件又有路由导航和路由容器
当使用children属性实现子路由时，子路由的path属性前不要带"/"，否则会永远以跟路径开始请求

//定义嵌套路由
var router=new VueRouter({
	routes:[{
		path:'/home',
		component:home,
		children:[//子路由
			{path:'login',component:login},
			{path:'register',component:register}]
	}]
})

如下所示：
在这里插入图片描述

5.6命名路由

vue-router提供了一种隐式的引用路径，即命名路由，可以在创建Router实例的时候，在routes中给某个路由设置名称name值
通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候，通过路由的名称取代路径地址直接使用
像这种命名路由的方式，无论path多长、多繁琐，都能直接通过name来引用，十分方便

命名路由案例
在这里插入图片描述
当使用对象作为路由的时候，通过name来给路由起名字
使用属性绑定，是因为to的值是一个js对象

5.7命名视图

在开发中，有时候想同时展示多个同级视图，而不是嵌套展示，则可以在页面中定义多个单独命名的视图
在router-view上定义name属性表示视图的名字，然后就可以根据不同的name值展示不同的页面，如left、main等
如果router-view没有设置名字，那么默认为default
命名视图案例

//头部结构
<div id="app">
	<router-view></router-view>
	<div class="container">
		<router-view name="left"></router-view>
		<router-view name="main"></router-view>
	</div>
</div>

在这里插入图片描述

5.8编程式导航

5.8.1router.push()

在前面的开发中，当进行页面切换时，都是通过router-link来实现的，这种方式属于声明式导航
为了更方便地在项目中开发导航功能，Vue提供了编程式导航，也就是利用JavaScript代码来实现地址的跳转，通过router实例方法来实现
这个方法会向history栈添加一条新的记录，当用户单击浏览器后退按钮时，可以回到之前的URL
在单击router-link时，router.push方法会在内部调用，也就是说，单击router-link :to="…"等同于调用router.push方法

push方法的语法
在这里插入图片描述
在参数对象中，如果提供了path，params会被忽略，为了传参数，需要提供路由的name或者手写带有参数的path
①query传参

②params传参

在这里插入图片描述

5.8.2router.replace()

replace与push方法类似，区别在于，为router-link设置replace属性后，当单击时，就会调用router.replace，导航后不会向history栈添加新的记录，而是替换掉当前的history记录
①编程式

router.replace({path:'user'})

②声明式

<router-link :to="{path:'user'}" replace></router-link>

5.8.3router.go()

router.go方法的参数是一个整数，表示在history历史记录中向前或者后退多少步，类似于window.history.go
this.$router.go(-1)相当于history.back,表示后退一步，this. $router.go(1)相当于history.forward()，表示前进一步
在这里插入图片描述