vue3+uni-app路由传参_vue3 路由传参
最近有很多小伙伴咨询关于vue3+uni-app路由传参的问题，小编结合多年的经验整理出来一些vue3 路由传参对应的资料，分享给大家。
vue之路由传参，跳转，钩子函数
一.路由传参的三种方式
方式一：query的方式进行，通过添加？的方式传参
App页面配置：
childa页面配置：
方式二：通过id的方式传参，用到params
App页面配置：
childb页面配置：
index.js配置：
方式三：通过props：['id']的方式进行id方式的传参，不需要用到params
app页面配置和上面id一样
childb页面配置：
index.js页面：
二.路由的跳转
1.使用push的两种方式进行跳转指定页面
2.添加一级路由：
（1）写一个按钮，然后写个方法，执行方法后进行路由的添加
（2）写好要跳转的页面
3.添加二级路由：
（1）写一个按钮，然后写个方法，执行方法后进行路由的添加
（2）写好要跳转的页面
三，路由的钩子函数（全局和局部）在router的index.js里配置
1.全局路由守卫，每次路由跳转都会执行一遍
router.beforeEach((to,from,next)={
next()//这个必须写
})
to:表示要去的路由，from：表示之前的路由，next：必须要执行的函数，next表示跳转方法
2.监听全局路由离开时触发的钩子函数
没有next（）
router.afterEach((to,from)={
})
3.局部路由钩子函数
局部的路由钩子进入路由的时候触发
因为同一个路径参数不同或者是动态路由，不会触发beforeEnter
beforeEnter:(to,from,next)={
next()}
vue路由传参刷新无数据怎么处理？
可以使用keep-alive缓存页面：具体做法是：可在App.vue中
keep-alive :include="includePages"
router-view id="app"/router-view
/keep-alive
includePages：对应一个数组，里面是要缓存的页面的name，即是.VUE文件中：
export default {
name: 'xxx',
这里的XXX
vue-router怎么给子路由传参
路由传参数。在很多时候我们需要路由上面传递参数，比如新闻列表页，我们需要传递新闻ID，给新闻详细页。
1.新闻列表页模板
template id="news"
div
h2新闻列表/h2
ul
li
router-link to="/news/001"新闻001/router-link
/li
li
router-link to="/news/002"新闻002/router-link
/li
/ul
/div
/template1234567891011121312345678910111213
我们访问/news/001，跳转到新闻详细页，展示001的这条新闻。
2.新闻详细页组件准备
template id="NewsDetail"
div
新闻详细页面
span{{$route.params.id}}/span
/div
/template123456123456
$route.params.id获取路由上的参数
在js里定义路由组件：
//新闻详细页组件
const NewsDetail = { template: '#NewsDetail' };1212
3.定义路由，增加一个路由
{ path: '/news/:id', component: NewsDetail },11
访问/news/001或者/news/002就展示新闻详细页
4.全部代码如下：
!DOCTYPE html
html
head
title/title
meta charset="utf-8"
script src=""/script
script src=""/script
/head
body
div id="box"
p
router-link to="/home"home/router-link
router-link to="/news"news/router-link
/p
router-view/router-view
/div
!-- 模板抽离出来 --
template id="home"
!-- 注意：组件只能有一个根元素，所以我们包装到这个div中 --
div
h2首页/h2
router-link to="/home/login"登录/router-link
router-link to="/home/reg"注册/router-link
!-- 路由匹配到的组件将渲染在这里 --
router-view/router-view
/div
/template
template id="news"
div
h2新闻列表/h2
ul
li
router-link to="/news/001"新闻001/router-link
/li
li
router-link to="/news/002"新闻002/router-link
/li
/ul
/div
/template
template id="login"
div登录界面/div
/template
template id="reg"
div注册界面/div
/template
template id="NewsDetail"
div
新闻详细页面
span{{$route.params.id}}/span
/div
/template
script type="text/javascript"
// 1. 定义（路由）组件。
const Home = { template: '#home' };
const News = { template: '#news' };
const Login = { template: '#login' };
const Reg = { template: '#reg' };
//新闻详细页组件
const NewsDetail = { template: '#NewsDetail' };
// 2. 定义路由
const routes = [
{ path: '/', redirect: '/home' },
{
path: '/home',
component: Home,
children:[
{ path: '/home/login', component: Login},
{ path: '/home/reg', component: Reg}
]
},
{ path: '/news', component: News,},
{ path: '/news/:id', component: NewsDetail },
]
// 3. 创建 router 实例，然后传 `routes` 配置
const router = new VueRouter({
routes // （缩写）相当于 routes: routes
})
// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
router
}).$mount('#box')
// 现在，应用已经启动了！
/script
/body
/html
uniapp页面参数传递
链接传递 或者事件传递
1、要传递参数的页面
2、接收的页面
事件传递多个参数，传递数组用事件来传递，因为要先转成字符串
1、在页面中定义要传递
点击传递数据
添加一个事件
2、接收的页面
这里一定onLoad ，只能用onLoad才能接收到参数
三、Uni-app + vue3 页面如何跳转及传参？
Vue 项目往往需要使用 vue-router 插件，刚开始入门 Uni-app + Vue3 项目的同学，会不会想着路由使用 vue-router V4 版本不就可以了吗？
不怕大家笑话，我就是这样想的，毕竟我是第一次使用 Uni-app ，由于孕期记性贼差，所以我决定写成笔记，加深记忆。
uni-app 页面路由为框架统一管理的，我们需要在 page.json 文件里配置每个页面路由以及页面样式，有些类似小程序中的 app.json 文件，所以 uni-app 的路由用法和写法与 vue-router 不同。
项目初始化完成，对应的 page.json 文件为：
uni-app 通过 pages 节点配置应用都有哪些页面，接收一个数组，每个元素都是一个对象，属性有：
uni-app 页面路由跳转有两种方式：使用 navigator 组件跳转、调用API 跳转。
1、navigator组件跳转
类似于 a 标签，但是只能跳转到本地页面，目标页面必须在 page.json 中注册。
navigator 属性有：
open-type 有效值
2、uni-app API 跳转
使用 API 页面跳转方式有：
框架以栈的形式管理当前所有页面， 当发生路由切换的时候，页面栈的表现如下：
方式1：onLoad 接收
方式2：setup语法糖接收
onLoad 函数是监听页面加载，接收的参数是页面传递的数据，是一个 object 类型。
看到这，相信很快就能上手 uni-app + vue3 项目路由喽，也可以参考官网教程：
只要你仔细阅读了上述，那么你就已经了解了vue3 路由传参的相关知识，如果屏幕面前的你还有什么对vue3+uni-app路由传参好的建议和想法，欢迎各位再下面评论区评论出来，我们将及时回复。
