最简单的页面跳转，以下是按照weex官网安装出来的目录结构：
一、首页 foo.vue 页面(类似一个容器)
<template>
<div class="wrapper">
<router-view></router-view>
</div>
</template>
二、修改 app.js 页面
import foo from './src/foo.vue'
import router from './src/router.js' //导入路由文件
foo.el='#root'
foo.router=router //给根组件设置路由
export default new Vue(foo); //穿件vue对象
router.push('home') //指定一个路由入口（初始显示的页面内容）
三、src目录下新建 router.js 文件
//导入模块
import VueRouter from 'vue-router'
import Vue from 'vue'
//导入使用的组件
import home from'./home.vue'
import messages from'./messages.vue'
Vue.use(VueRouter)
//创建路由对象
export default newVueRouter({
//mode: 'abstract',//weex 中只能使用 abstract 类型 默认可以不写 系统会自动设置为abstract
routes:[
{path:'/home',component: home},
{path:'/messages',component:messages}
]
})
四、src新建home.vue
<template>
<div>
<text class="button" @click="jump('messages')"> 跳转至messages页面 </text>
</div>
</template>
<script>
export default {
methods:{
jump:function (e) {
this.$router.push(e);
}
}
}
</script>
五、src新建messages.vue
<template>
<div>
<text class="button" @click="goback()">返回</text>
<text>messages页面</text>
</div>
</template>
<script>
export default{
methods:{
goback:function(){
this.$router.go(-1)
}
}
}
</script>
如图+最后目录：
网友评论