带你入坑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')

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

<template>
  <div class="wrapper">
<div class="nav">
   <text @click="jump('home')" :class="selectedPath=='home'?'nav-item-selected':'nav-item-normal'">主页{{selectedTitleColor}}</text>
   <text @click="jump('me')" :class="selectedPath=='me'?'nav-item-selected':'nav-item-normal'">我的</text>
</div>
<!-- 定义路由模板视图 这个是用来加载组件的-->
<router-view class="template"></router-view>
  </div>
    </template>

<style>
  .wrapper { align-items: center; margin-top: 40px; }
  .nav{
        display: flex;
        flex-direction: row;
      justify-content: space-around;
        width:750px;
        height: 88px;
  }
  .template{ 
     position:absolute;
     top: 128px;
     bottom: 0px;
     left: 0px;
     right: 0px;
    }
  .nav-item-selected{
color:yellowgreen;
  }
  .nav-item-normal{
        color:black;
  }
</style>
<script>
  export default {
data:{
  selectedPath:'me'
},
methods: {
      // 单击按钮跳转到指定的路径
  jump: function (e) {
        this.$router.push(e);
        this.selectedPath = e;
  }
}
}
</script>

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

home.vue

<template>
    <div class="home-container">
        <text>主页</text>
    </div>
</template>
<script>
    export default{
    }
</script>
<style>
.home-container{
  background-color:red;
  width:750px;
  font-size: 30px;
  text-align: center;
}
</style>

me.vue

<template>
<div class="me-container">
    <text>我的</text>
</div>
</template>
<script>
export default{
}
</script>
 <style>
 .container{
    background-color: green;
    width:750px;
    font-size: 30px;
 }
</style>

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

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

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

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

本节内容

推荐阅读更多精彩内容