当前位置: 代码迷 >> 综合 >> Vue路由;query传参;params传参;router-link的repalce属性;back/forward/push/repalce,go的用法;keep-alive及两个新生命周期使用;
  详细解决方案

Vue路由;query传参;params传参;router-link的repalce属性;back/forward/push/repalce,go的用法;keep-alive及两个新生命周期使用;

热度:37   发布时间:2023-12-06 18:53:28.0

路由得理解:vue的一个插件库,专门用来实现SPA应用.

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

1.基本使用

npm 安装路由
注意:yarn 安装 yarn add vue-router

npm i vue-router

在这里插入图片描述
在这里插入图片描述

3.多级路由

在这里插入图片描述


4.路由的query参数

query路由传参两种方式
分别是:字符串和对象传参写法;

在这里插入图片描述
name 传参
在这里插入图片描述


5.路由的params参数

params路由传参

方式一 路由配置
在这里插入图片描述
前端传参
在这里插入图片描述
页面接参
在这里插入图片描述

方式二路由配置
在这里插入图片描述
前端传参
在这里插入图片描述
页面接参
在这里插入图片描述
备注:用params 传参 必须用name传参,不能用path;
用query 传参 可用path 可用name;
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述


6.路由的props属性

params写法

在这里插入图片描述

组件接收到

在这里插入图片描述

query写法

1)接参写法(推荐)
在这里插入图片描述
2)解构赋值
在这里插入图片描述

3)双重解构赋值
在这里插入图片描述
总结:
在这里插入图片描述


7.router-link的replace属性

在这里插入图片描述


8.编程式路由导航 (back,forward,push,repalce,go)

在这里插入图片描述


9.1 缓存路由组件 keep-alive

一个写字符串
在这里插入图片描述
多个写数组
在这里插入图片描述

9.2 keep-alive常用的两个钩子 activated 和deactivated

在这里插入图片描述

  相关解决方案