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

      

目录

懵逼的一个小时   

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

非官方接口的另类写法

错误编写：

正确编写（只需写父组件即可，其他是多余）：

---

懵逼的一个小时   

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

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

uni.navigateTo

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

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

<RouterView>RouterView>

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

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

经过一个多小时后，我终于发现了问题：（uni-app与vue路由的不同）

1. vue中只针对PC端而言，他的没有pages.json文件中所以不会自动定义此项目的路由的，所以，当我们用vue写路由时，要有手写路由表的这一重要步骤。
2. uni-app是一款兼容流生态，虽然用的是vue框架的内核，但是配置路由却与vue不一样。因为uni-app中有pages.json的存在，它在创建每一个vue页面时都可以在pages.json中配置创建的vue页面路径。
3. 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');