uni-app 路由跳转和传参

发布时间：2023-04-24 14:17:32 所属栏目：教程来源：

导读：在没接触过 web 开发之前，大家对路由这两个字应该也比较熟悉，就是我们平时使用无线网络时接触到的路由器。

其实 web 开发中的路由与我们平时接触到的路由器原理是一样的，都是将不同的请求地址转发给相应的控制

在没接触过 web 开发之前，大家对路由这两个字应该也比较熟悉，就是我们平时使用无线网络时接触到的路由器。

其实 web 开发中的路由与我们平时接触到的路由器原理是一样的，都是将不同的请求地址转发给相应的控制器进行处理。

在 web 开发中的路由会根据不同的 url 将请求分配到能处理这个 URL 的程序或模块，根据不同的 url 地址展示不同的页面或内容。

uni-app 有自己的一套路由管理方式，与 Vue Router 不同。页面路由需要在 pages.json 文件中配置，与小程序在 app.json 中配置页面路由是类似的。

那路由在项目中的具体作用是怎样的呢？我们这节课来了解一下。

路由的优缺点

网页更加流畅
传统web开发的每一次请求都需要服务器来进行处理，但是有些操作只需要修改页面逻辑就可以实现用户需要的效果，不用请求服务器，这时路由就派上用场了。

使用路由开发，用户的请求不需要每次都经过服务器来处理，提高了网页的流畅性，可以快速将网页内容展现给客户。

方便用户分享收藏网页
使用路由进行开发，页面内容会根据 url 的改变而改变，而不会像js处理的那样，只修改了页面内容，而不会改变 url。所以当用户收藏与分享页面时，通过 url 就会直接打开指定的页面，用户体验较好。

缺点
没有合理利用缓存
使用浏览器时，点击浏览器的前进，后退按钮，使用路由开发的项目，会重新发送请求，缓存利用不合理。

无法记住当前页面的滚动位置
在使用浏览器的前进，后退按钮时，单页面无法记住之前滚动的位置。

配置路由
自动配置路由
我们来创建一个 page1 页面。右键点击 pages 文件夹，选择新建页面。在下面新弹出的窗口，系统会默认帮我们勾选“在 pages.json 中注册的选项”，这样页面创建完成后，路由也会自动配置好。

点击创建，现在 pages.json 文件中会自动添加下面的路由代码。

实例：

{
"path" : "pages/page1/page1",
"style" : {}
}
手动配置路由
如果需要自己手动添加路由，直接在 pages.json 文件的 pages 对象中添加即可。我们一般配置 path 和 style 两个属性。

自己配置的时候要注意大括号要配对，不要落下逗号。

路由跳转
uni-app 有两种方式进行路由跳转：使用 navigator 组件跳转、调用 API 跳转，下面我们来分别了解这两种方式如何跳转。

navigator 组件跳转
我们来实现从 index 页面跳转到刚刚创建的 page1 页面，编辑 pages/index/index.vue 文件。

在 data 中添加变量 url。

实例：

data() {
return {
url:"/pages/page1/page1"
}
}
然后在 template 标签中添加下面代码。

实例：



<navigator :url="url" open-type="navigate">
<button type="default">跳转到新页面</button>
</navigator>

<navigator :url="url" open-type="redirect">
<button type="default">在当前页打开</button>
</navigator>

<navigator :url="url" open-type="switchTab">
<button type="default">跳转到tab页面</button>
</navigator>
点击工具栏–运行–运行到内置浏览器，查看效果。点击按钮就能通过open-type指定的跳转方式跳转到 page1 页面。

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!