??????

目錄

懵逼的一個小時 ??

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

非官方接口的另類寫法

錯誤編寫：

正確編寫（只需寫父組件即可，其他是多余）：

懵逼的一個小時 ??

????????之前用vue寫router路由的時候，先配置一個路由表，然后再將配好的路由push到已有的組件里面，再通過<RouterView></RouterView>方法將每一個調(diào)用的路由的內(nèi)容渲染到父組件要用的位置。

今晚我在用uni-app的時候，突然不想用uni-app自己提供的路由跳轉(zhuǎn)方法：

uni.navigateTo

我想用vue那種路由的跳轉(zhuǎn)方式，我一開始想了想應(yīng)該是可以的，畢竟uni-app的內(nèi)核也是vue.js框架。所以，我開始安裝第三方vue-router、配置main.js、創(chuàng)建router路由表配置頁面路由等。

等我一頓操作后，我發(fā)現(xiàn)，wc！不太對，和vue不太一樣。點擊跳轉(zhuǎn)的時候路徑動，但是內(nèi)容是不刷新的，一般遇到這種情況，在vue是父組件調(diào)用子組件是，父組件沒有加：

<RouterView></RouterView>

導(dǎo)致的，但是我想："我明明在父組件中加上了啊，為什么不行。"我有重新了一遍項目，還是不行。

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

經(jīng)過一個多小時后，我終于發(fā)現(xiàn)了問題：（uni-app與vue路由的不同）

1. vue中只針對PC端而言，他的沒有pages.json文件中所以不會自動定義此項目的路由的，所以，當(dāng)我們用vue寫路由時，要有手寫路由表的這一重要步驟。
2. uni-app是一款兼容流生態(tài)，雖然用的是vue框架的內(nèi)核，但是配置路由卻與vue不一樣。因為uni-app中有pages.json的存在，它在創(chuàng)建每一個vue頁面時都可以在pages.json中配置創(chuàng)建的vue頁面路徑。
3. uni-app正因為有pages.json文件的存在，所以我們可以通過官方提供的uni.navigateTo等uniAPI接口去實現(xiàn)路由的跳轉(zhuǎn)。

非官方接口的另類寫法

如果不想用3.說的官方提供的api接口去實現(xiàn)跳轉(zhuǎn)的話，我們可以直接使用this.$router.push實現(xiàn)路由的跳轉(zhuǎn)，uni-app中使用它不會像vue中那么繁瑣，它不需要開發(fā)者手動配置路由表。

錯誤編寫：

父組件中：

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到我們的頁面的具體的路徑就可以！文章來源地址http://www.zghlxwxcb.cn/news/detail-489947.html

// 跳轉(zhuǎn)首頁
			index() {
				this.$router.push('/pages/houtai/index/index');
			},
			// 跳轉(zhuǎn)個人中心
			personal_center() {
				this.$router.push('/pages/houtai/personal_center/personal_center');
			},
			// 跳轉(zhuǎn)公告管理
			announcement() {
				this.$router.push('/pages/houtai/announcement/announcement');
			},
			// 跳轉(zhuǎn)工作人員管理
			worker() {
				this.$router.push('/pages/houtai/worker/worker');
			},
			// 跳轉(zhuǎn)用戶信息管理
			user() {
				this.$router.push('/pages/houtai/user/user');
			},
			// 跳轉(zhuǎn)館內(nèi)設(shè)備管理
			equipment() {
				this.$router.push('/pages/houtai/equipment/equipment');
			},
			// 跳轉(zhuǎn)管理員管理
			Administrator() {
				this.$router.push('/pages/houtai/Administrator/Administrator');

到了這里，關(guān)于關(guān)于uni-app與vue路由配置的不同，不使用uni.navigateTo接口跳轉(zhuǎn)時，使用this.$router.push的踩坑經(jīng)驗的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！