uniapp的app.vue监听推送点击无法跳转

34 篇文章 0 订阅

利用uniapp写了一个小的app,用了unipush推送消息,点击消息打开app进行跳转相应的页面

但是到了app.vue页面怎么都跳转不了 ,查询了相关官方资料 官方资料提及在app.vue不能跳转

看到这里我以为真的是不能跳转 但是百度了一凡才发现好多人说可以跳转的  我的死活就是不能跳转   知道有一篇文章说延迟跳转可以解决问题  然后我尝试了一下延迟1.5秒钟果然成功了

<script>
	export default {
		onLaunch: function() {
				// #ifdef APP-PLUS  
		        const _self = this;  
		        const _handlePush = function(message) {  
		            // TODO
					setTimeout(function(){
						console.log(message,999999999)
						console.log(message.title);
						var newsid = message.payload.newsid;
						console.log(newsid)
						uni.reLaunch({
							url: '/pages/newsInfo/newsInfo?newsid='+newsid,
						});
					}, 1500);
					 
		        };  
		        plus.push.addEventListener('click', _handlePush);  
		        plus.push.addEventListener('receive', _handlePush);  
				// #endif 
				let pinf = plus.push.getClientInfo();
				let cid = pinf && pinf.clientid || ''; //客户端标识
				console.log(cid,9999)
				
				plus.push.getClientInfoAsync((info) => {
					cid = info.clientid;
					conso.lgo(cid,77777)
				
				}, err => {
				});
		},
		onShow: function() {
			console.log('App Show')
			plus.push.addEventListener(
				'click',
				function(msg) {
				
				},
				true
			);
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

<style>
	/*每个页面公共css */
	@import "./common/uni.css";
	@import "./static/iconfont/iconfont.css";
	/* #ifdef H5 */
	uni-page-head {
		display: none;
	}
	/* #endif */
	image{
		width: 100%;
	}
	a, a:visited {
	    color: #333;
	}
	a, del, ins, s, u{
		text-decoration: none;
	}
	a, button {
	    cursor: pointer;
	}
	
	
	
	
	.f-thide {
	    overflow: hidden;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	    word-break: normal;
	}
</style>

 

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 17
    评论
### 回答1: uni-app 是一个基于 Vue.js 开发跨平台应用的框架,其 app.vue 是 uni-app 应用的全局配置文件。在 app.vue监听当前路由可以实现一些页面、权限校验等需要在整个应用中实现的操作。 具体实现方法如下: 1. 在 app.vue 中引入 uni-app 提供的路由 API ```javascript import uni from '@/common/uni.js' ``` 2. 在 app.vue 的 mounted 中添加监听函数,监听路由变化 ```javascript mounted() { uni.onRouterChange((toRoute, fromRoute) => { //路由变化时的处理逻辑 console.log('当前路由:', toRoute.path) }) } ``` 3. 在监听函数中编写具体的处理逻辑,比如页面、权限校验等操作。此时,可以通过 toRoute.path 获取当前路由路径。 需要注意的是,uni.onRouterChange() 只能在 app.vue 中使用,不能在其他组件中使用。 通过在 app.vue监听当前路由,可以实现对整个应用的路由变化进行监听和操作,提高了应用的交互性和用户体验。 ### 回答2: UniApp是一个基于Vue.js框架的跨平台开发系统。它可以同时开发多个平台,如H5、iOS、Android等。在UniApp中,app.vue是整个应用的入口文件,也是Vue组件中最顶层的父组件。因此,我们可以在app.vue监听当前路由。 在app.vue监听路由的步骤如下: 1. 在app.vue中定义一个computed属性currentRoute,定义方法如下: ``` computed: { currentRoute() { return this.$route.path } } ``` 2. 在template中可以通过{{currentRoute}}来获取当前路由的路径。 3. 当路由发生改变时,会自动重新计算computed中的值并更新视图。 4. 如果需要在路由改变时执行一些其他的操作,比如发统计数据给服务器等,可以在watch中监听$route变化。 ``` watch: { $route(to, from) { // 发统计数据给服务器等操作 } } ``` 通过以上步骤,在app.vue监听当前路由非常简单。我们可以实时获取当前路由的路径,也可以在路由改变时执行其他操作。这样的话,我们就可以在UniApp中更方便地管理应用的路由了。 ### 回答3: 针对问题 Uniapp app.vue监听当前路由,我们可以这样来解析。 首先需要明确的是,Vue 是一套用于构建用户界面的渐进式框架,而 Uniapp 是一套基于 Vue.js 的跨平台开发框架,支持一次编写,多端运行。 在 Uniapp 中,app.vue 是整个应用的根组件,负责页面的初始化、全局的状态管理等等。同时,它也是一个高阶组件,在其下包含了多个页面组件,并且可以通过监听当前路由,判断当前所处的路由位置,来进行不同的操作。 Uniapp 中可以通过 this.\$route.path 获取当前路由路径,我们可以把监听当前路由的操作放在 app.vue 的生命周期钩子函数中,如 mounted,实现对当前路由的监听。 代码如下: ``` // app.vue <template> <div id="app"> <router-view></router-view> </div> </template> <script> export default { mounted() { console.log('当前路由路径为:', this.$route.path) // 进行相应的操作 } } </script> ``` 以上代码将监听当前路由的操作放在了 app.vue 的 mounted 钩子函数中,当页面加载完成后,会输出当前路由路径,并在相应位置进行相应的操作。 总之,对于Uniapp app.vue监听当前路由问题,我们只需要通过监听当前路由路径,判断当前所处的路由位置,就可以实现不同的操作,这对于路由的管理和控制是非常重要的。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 17
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值