uni-app 路由跳转和传参
在没接触过 web 开发之前,大家对路由这两个字应该也比较熟悉,就是我们平时使用无线网络时接触到的路由器。
其实 web 开发中的路由与我们平时接触到的路由器原理是一样的,都是将不同的请求地址转发给相应的控制器进行处理。
在 web 开发中的路由会根据不同的 url 将请求分配到能处理这个 URL 的程序或模块,根据不同的 url 地址展示不同的或。
有自己的一套路由管理方式,与 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 两个。
自己配置的时候要注意大括号要配对,不要落下逗号。
有两种方式进行路由:使用 navigator 组件、 API ,下面我们来分别了解这两种方式如何。
我们来实现从 index 到刚刚创建的 page1 ,编辑 pages/index/index.vue 。
在 data 中变量 url。
实例:
data() {
return {
url:"/pages/page1/page1"
}
}
然后在 template 中下面。
实例:
<!-- open-type的表示方式 -->
<!-- open-type为navigate,如果不写open-type方式认为navigate -->
<navigator :url="url" open-type="navigate">
<button type="default">到新</button>
</navigator>
<!-- open-type为redirect -->
<navigator :url="url" open-type="redirect">
<button type="default">在当前页打开</button>
</navigator>
<!-- open-type为switchTab -->
<navigator :url="url" open-type="switchTab">
<button type="default">到tab</button>
</navigator>
点击工具栏–运行–运行到内置浏览器,查看。点击按钮就能通过open-type指定的方式到 page1 。
继续编辑 pages/index/index.vue ,我们创建几个 methods ,在里面实现。
实例:
navigateTo(){
uni.navigateTo({
url: this.url
})
},
redirectTo(){
uni.redirectTo({
url: this.url
});
},
switchTab(){
uni.switchTab({
url: this.url
});
}
在 template 中下面,点击事件。
实例:
<button type="default" @tap="navigateTo">到新</button>
<button type="default" @tap="redirectTo">在当前页打开</button>
<button type="default" @tap="switchTab">到tab</button>
这样我们就可以点击工具栏–运行–运行到内置浏览器查看了,与上面的是一样的
从 A 到 B ,我们想要将 A 的值传到 B ,可以将要传递的值直接在面的 URL 路径后面拼接,然后再在 B onload 里面接收这个值。
现在我们想要从 index 到 page1 ,在 index 中,将想要传递的值拼接到 url 的后面,下面我们写演示一下。
编辑 pages/index/index.vue 。
实例:
// 按钮
<button type="default" @tap="navigateData">到 page1 </button>
// navigateData ,将参数拼接到 URL 后面
navigateData(){
uni.navigateTo({
url: this.url + "?data='我是从 index 传过来的值'"
})
}
接下来在 page1 接收参数,编辑 pages/page1/page1.vue 。
实例:
onLoad(options) {
var data = options.data
console.log(data)
}
点击工具栏–运行–运行到内置浏览器,查看。点击「到 page1 」的按钮,到 page1 后,在控制台会打印出传递过来的data值。
Tips:url有长度限制,太长的字符串会传递失败,可以使用缓存、窗体通信等。
本节课程我们主要学习了路由以及路由传参,本节课程的需要掌握的重点如下:
了解路由是什么,掌握路由的配置;
掌握路由的两种方式:navigator 组件、 API ;
掌握路由的传参。