

首页  思维导图  详情



23、vue-router基础概括

2022-04-01 12:46:58   0  举报





AI智能生成

vue

前端开发

vue

vue-router

路由

金色小芝麻

模版推荐

作者其他创作

大纲/内容

下载

官网

https://router.vuejs.org/zh/

$ npm i vue-router / $ yarn add vue-router

路由使用

导入路由

在 main.js 主入口中

this.$router

提供一系列操作路由的方法

this.$route

提供一系列路由的属性

配置项

mode

路由的方式：HASH（哈希路由） && HISTORY（BROWSER路由）

HASH路由

在URL地址末尾加入 #/

哈希值/

例如

#/userlist

哈希值/userlist

#/useradd

哈希值/useradd

原理

vue-router 监听当前页面HASH值的改变，根据不容的HASH值，在“路由视图容器”中渲染不同的组件

路由容器

router-view 路由容器

根据路由表的匹配规则，匹配到不同的组件，每一次都可以把匹配到的组件放置在容器中进行渲染

routes

配置路由表：在不同的HASH值下匹配不同的组件

语法

routes：[{key:val,...},{...}...]

例

需要把用到的组件先导入

路由懒加载则不用

path: '/'

路由路径

（后期跳转和匹配的时候需要）

例如：<router-link to='/'> 或者 :to='{path:'/'}'

path: '*'

* 代表所有路径

name:'xxx'

命名路由

（后期可基于 <router-link :to='{name:'xxx'}'> 跳转）

component: Home

渲染的组件

redirect: '/' 

路径重定向为“/”

children : [{...}]

子路由

每一次URL地址后面的HASH值改变，程序就监听到了，程序会重新从路由表中第一个开始向下依次进行匹配，直到找到符合的那一项为止

命名视图

路由懒加载

在路由表中首先要导入需要用到的全部组件，在路由表处理的时候首先会把这些组件全部编译处理，然后在向下逐一执行代码，如果组件过多就会大大影响性能

使用

作用

出于性能优化考虑，利用路由懒加载，实现按需加载

不需要在开始导入全部组件，在路由表中使用组件的时候，在导入

路由跳转

实现路由跳转，有两大方案：

1. router-link

<router-link> 最后渲染出来的是a标签

跳转方式

to 地址

to='[path]'

<router-link to='/'>

:to="{[path]/[name],传参}"

这种方式不仅能够实现跳转，还可以传递参数

path

基于query显示传参

基于query显示传参（传递的参数信息会以问号的方式显示在URL地址中）

1. path或者name实现路由跳转都可以基于这个方式处理

2. 基于$route.query可以获取这个值，而且不论是点击传递还是页面再刷新， 只要地址栏中有问号参数，query中就可以获取到这个值

name

基于params 隐形传惨

基于params传参是隐性传参（传递的信息不会在地址栏中体现）

1.只有基于命名路由跳转才可以使用params传参

2.进入到路由后，可以基于$route.params获取传递参数信息

3.页面一旦刷新，则传递的参数信息就没有了

动态路由

动态路由（需要在路由表中设置好）

只通过 path 方式实现

第一步：在路由表中设置 path: '/active/:id/:name', 这种格式的 path 完成提前占位

第二步：在 router-link 中传入参数即可

可根据参数不同跳转相同组件的不同操作

问题

点击多个按钮跳转到同一个路由，路由管控的组件并不会从头开始重新渲染（也就是created/mounted等周期函数只执行一次）

触发的只是更新

解决

1、先切换到其它路由组件，路由中会默认把上一次渲染的组件销毁；

当后期重新切换回来的时候，触发当前组件的从头开始重新渲染；

但是两次连着要渲染一个组件，那么组件不会被销毁

2、watch 监听路由改变

2. 基于JS中的 this.$router下的方法实现路由跳转

编程式导航

定义

通过JS实现路由的跳转和传参

相当于把 router-link 中的规则转移到JS中，利用JS实现

实现跳转的方式

push

类似于 <router-link to="">

用法基本相同

路由池

每一次的路由跳转都会记录在路由池中

go(-1)：在路由池中找到上一次的路由地址，并跳转到这个地址

go(1)：在路由池中找到下一次的路由地址，并跳转

back

与 go(-1) 效果相同

例

子路由

子路由的值是一个数组

每一项都是一个对象，对象中包含内容与routes中一致

 Collect

Get Started

Vue入门

 Collect

Get Started

Vue-Router 流程图

 Collect

Get Started

基础学习vue

 Collect

Get Started

Sample Flowchart Template23





0 条评论

下一页