首页 > 其他分享 >关于uni-app与vue路由配置的不同,不使用uni.navigateTo接口跳转时,使用this.$router.push的踩坑经验

关于uni-app与vue路由配置的不同,不使用uni.navigateTo接口跳转时,使用this.$router.push的踩坑经验

时间:2023-06-18 10:33:21浏览次数:42  
标签:navigateTo vue import app 跳转 router uni pages

之前用vue写router路由的时候,先配置一个路由表,然后再将配好的路由push到已有的组件里面,再通过<RouterView></RouterView>方法将每一个调用的路由的内容渲染到父组件要用的位置。


今晚我在用uni-app的时候,突然不想用uni-app自己提供的路由跳转方法:


uni.navigateTo

我想用vue那种路由的跳转方式,我一开始想了想应该是可以的,毕竟uni-app的内核也是vue.js框架。所以,我开始安装第三方vue-router、配置main.js、创建router路由表配置页面路由等。


等我一顿操作后,我发现,不太对,和vue不太一样。点击跳转的时候路径动,但是内容是不刷新的,一般遇到这种情况,在vue是父组件调用子组件是,父组件没有加:


<RouterView></RouterView>

导致的,但是我想:"我明明在父组件中加上了啊,为什么不行。"我有重新了一遍项目,还是不行。


uni-app与vue路由配置的不同

经过一个多小时后,我终于发现了问题:(uni-app与vue路由的不同)


vue中只针对PC端而言,他的没有pages.json文件中所以不会自动定义此项目的路由的,所以,当我们用vue写路由时,要有手写路由表的这一重要步骤。

uni-app是一款兼容流生态,虽然用的是vue框架的内核,但是配置路由却与vue不一样。因为uni-app中有pages.json的存在,它在创建每一个vue页面时都可以在pages.json中配置创建的vue页面路径。

uni-app正因为有pages.json文件的存在,所以我们可以通过官方提供的uni.navigateTo等uniAPI接口去实现路由的跳转。

非官方接口的另类写法

如果不想用3.说的官方提供的api接口去实现跳转的话,我们可以直接使用this.$router.push实现路由的跳转,uni-app中使用它不会像vue中那么繁琐,它不需要开发者手动配置路由表。


错误编写:

父组件中:


index() {

    this.$router.push('/index');

  	},

main.js中:


import App from './App'

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

  
Vue.use(ElementUI)

  
import Vue from 'vue'

import router from './router'

  
Vue.config.productionTip = false

  
App.mpType = 'app'

  
const app = new Vue({

  ...App,

  router

})

app.$mount()

router/index.js中:


import Vue from 'vue'

import Router from 'vue-router'

  
import index from '@/pages/houtai/index/index'

import Administrator from '@/pages/houtai/Administrator/Administrator'

import announcement from '@/pages/houtai/announcement/announcement'

import equipment from '@/pages/houtai/equipment/equipment'

import personal_center from '@/pages/houtai/personal_center/personal_center'

import user from '@/pages/houtai/user/user'

import worker from '@/pages/houtai/worker/worker'

  
  
Vue.use(Router)

  
export default new Router({

	routes: [{

  	path: '/index',

  	component: index,

  },

  {

  	path: '/Administrator',

  	component: Administrator

  },

  {

  	path: '/announcement',

  	component: announcement

  },

  {

  	path: '/equipment',

  	component: equipment

  },

  {

  	path: '/personal_center',

  	component: personal_center

  },

  {

  	path: '/user',

  	component: user

  },

  {

  	path: '/worker',

  	component: worker

  }

	]

})

正确编写(只需写父组件即可,其他是多余):

父组件中:


说明:因为uni-app的所有的页面路由都给我配置到了pages.json文件中,所有我们没有必要再去手动写一遍路由表,我们直接用this.$router.push方法push到我们的页面的具体的路径就可以!


// 跳转首页

  	index() {

    this.$router.push('/pages/houtai/index/index');

  	},

  	// 跳转个人中心

  	personal_center() {

    this.$router.push('/pages/houtai/personal_center/personal_center');

  	},

  	// 跳转公告管理

  	announcement() {

    this.$router.push('/pages/houtai/announcement/announcement');

  	},

  	// 跳转工作人员管理

  	worker() {

    this.$router.push('/pages/houtai/worker/worker');

  	},

  	// 跳转用户信息管理

  	user() {

    this.$router.push('/pages/houtai/user/user');

  	},

  	// 跳转馆内设备管理

  	equipment() {

    this.$router.push('/pages/houtai/equipment/equipment');

  	},

  	// 跳转管理员管理

  	Administrator() {

    this.$router.push('/pages/houtai/Administrator/Administrator');

标签:navigateTo,vue,import,app,跳转,router,uni,pages
From: https://blog.51cto.com/u_16102274/6507563

相关文章

  • Unity绘制参考网格
    1.仿制Maya参考网格 usingUnityEngine;publicclassReferenceGridRenderer:MonoBehaviour{//[SerializeField]Colorcolor=newColor(1,1,1,0.5f);[SerializeField][Range(1,1000)]floatrange=20;[SerializeField][Range(0.1f,100)]floatin......
  • [Go] 理解 Go 的 unintptr、unsafe.Pointer、*type
    理解Go的unintptr、unsafe.Pointer、*type概念*type:用于传递对象地址,无法进行指针运算unsafe.Pointer:通用指针,用于表示任意类型的指针,无法进行指针运算,无法读取存储的值,可作为对象引用任意类型的指针可以转换为unsafe.Pointerunsafe.Pointer可以转换为任......
  • python unitest 测试装置(Test Fixture)
    unittest框架提供了测试装置(TestFixture)的功能,用于在测试用例执行前后进行准备和清理操作。测试装置包括setUp()方法和tearDown()方法,分别用于在每个测试用例执行前和执行后进行相应的操作。下面是一个示例,演示如何使用测试装置:importunittestclassMyTestCase(unittest.Te......
  • python unitest 测试运行器(Test Runner)
    测试运行器(TestRunner)是unittest框架提供的执行测试用例的组件,用于自动运行测试用例并生成测试结果报告。它负责加载测试用例、执行测试用例,并提供测试结果的输出。unittest框架提供了多种测试运行器,包括TextTestRunner、HTMLTestRunner、XMLTestRunner等。这些运行器可以根据不......
  • spring6整合JUnit5
    1. Spring对JUnit4的支持   136准备工作:pom.xml<?xmlversion="1.0"encoding="UTF-8"?><projectxmlns="http://maven.apache.org/POM/4.0.0"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:sch......
  • python unitest 测试套件TestSuite()
    unittest框架提供了多种测试套件的使用方法,用于组织和执行测试用例。以下是一些常见的测试套件使用方法及其示例:1.使用unittest.TestSuite()创建测试套件,然后使用addTest()方法添加测试用例。importunittestclassMyTestCase(unittest.TestCase):deftest_addition(self):......
  • python unitest测试用例
    unittest框架的测试用例有三种常见的写法:函数式、类式和装饰器式。函数式写法:importunittestdeftest_sum(self):result=sum([1,2,3])self.assertEqual(result,6)if__name__=='__main__':unittest.main() 注意事项:使用函数式写法时,测......
  • 如何让UnityEditor后台运行
    最近在玩ml-agents,发现训练的时候点击别的窗口,UnityEditor就挂起不接着运行了。google了一下发现可以通过点击Edit->ProjectSettings->Player->ResolutionandPresentation,然后勾选RunInBackground即可解决该问题:......
  • Discriminated Unions
    DiscriminatedUnions意为可识别的union,一个union变量知道自己是什么类型,或者说怎么去解释这片存储空间,std::variant即为C++17引入的类型安全的union类型,本文主解析std::variant的两种实现方式;内存如果借助tuple来实现:template<typename...Types>classVariant{public:......
  • Mark Fan:A computational model study on the mechanical response mechanism of asp
    WuhanJiangxiaRoadandBridgeEngineeringCo.,LtdSchoolofCivilEngineeringandArchitecture,WuhanInstituteofTechnologyMarkFan 15927602711Introduction:Asphaltisacommonlyusedmaterialinroadconstruction,anditsmechanicalpropertiespl......