之前用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