带你入坑02-weex-路由的使用

本节内容

学会使用路由进行组件切换

---

接上上节的内容进行讲解路由的使用

• 第一步

创建一个父组件和两个子组件
父组件foo.vue 的文件和子组件home.vue和me.vue

• 第二步 定义路由router.js 文件

  // 定义路由 
  //第一步 导入路由模块vue-router 和vue.js
  import VueRouter from 'vue-router'
  import Vue from 'vue'
  // 第二步 导入组件
  import home  from './home.vue'
  import me  from './me.vue'
  // 第三步 让Vue 使用  vue-router 当做自己的路由
  Vue.use(VueRouter)
  // 第四步 创建路由对象
  export default new VueRouter({
  // mode: 'abstract', // weex 中只能使用    abstract 类型 默认可以不写 系统会自动设置为abstract
  // 定义路由
  routes: [
    { path: '/home', component: home},
    { path: '/me', component: me}
  //  { path: '/article/:url(.*)?', component:       ArticleView },
  //  { path: '/item/:id(\\d+)', component: CommentView },
  //  { path: '/user/:id', component: UserView },
  //  { path: '/', redirect: '/home' }
   ]
  })

第三步 在入口的app.js文件中 创建根节点组件

// 第一步 导入根组件
import foo from './src/foo.vue'
// 第二步 导入路由文件
import router from './src/Router.js'
//第三步  给根组件一个id
foo.el = '#root'
//第四步给 给根组件设置路由
foo.router = router
// 第五步 创建Vue 对象
export default new Vue(foo);
// 第六步 指定一个路由入口
router.push('me')

第四步 我们看看我们的根组件的代码

第五步 home.vue 和me.vue 中的代码

home.vue

me.vue

210ADF6F-3350-475E-BE90-200CD377829A.png

A6844CE7-BB6F-43F4-862E-EAFE71797D18.png

路由的作用是在单页面内,进行组件的切换!