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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏ionic3+

ionic3使用带图标带事件的toast

这个时候,如果想扩展这些功能,一是修改源码,二是自己实现,然而这两种方法都比较麻烦,比较好的解决方案是利用现有的开源代码,搜索ionic的相关组件寥寥无几,这个...

10420
来自专栏移动端开发

告诉你 iOS9.0 之后的Bitcode到底是什么!!

 用Xcode 7 beta 3在真机(iOS 8.3)上运行一下工程,结果发现工程编译不过。看了下问题,报的是以下错误: ld: ‘/Users/**/Fr...

41180
来自专栏IT民工生存指南

从0开始Vue.js 和 Webpack 4 [1]

19150
来自专栏JackeyGao的博客

使用SASS做个可自定义主题的网页

Sass 是对 CSS 的扩展,让 CSS 语言更强大、优雅。 它允许你使用变量、嵌套规则、 mixins、导入等众多功能, 并且完全兼容 CSS 语法。 Sa...

30920
来自专栏一“技”之长

AppleWatch开发入门三——代码交互与控制器生命周期

        在前两篇博客中,讨论了关于watch开发中框架与界面布局相关,然而主要的逻辑,终究还是要通过代码来实现的,在我们创建了项目之后,就会生成Inte...

8030
来自专栏Youngxj

一键删除&#65279字符造成的顶部空白行

15320
来自专栏云服务试衣间

简单几步,利用Serverless,让COS中文件变更自动刷新CDN

SCF能实现事件式的触发,让你的一段代码跑在云上,无需自己去搭建服务器。而这里我们要利用能力:COS文件上传/删除的触发器。

6.4K290
来自专栏云计算

在Ubuntu 16.04上安装WordPress

在本指南中,您将学习如何在运行Ubuntu 16.04的Linode上安装WordPress。WordPress是一个流行的动态内容管理系统,专注于博客。Wor...

63620
来自专栏吴伟祥

防止用户将表单重复提交的方法 原

表单重复提交是在多用户Web应用中最常见、带来很多麻烦的一个问题。有很多的应用场景都会遇到重复提交问题,比如:

11220
来自专栏技术博客

VS2010Web默认的浏览器设置和VS里调试JavaScript代码的设置

   重装系统后,VS调用的Web浏览器不是IE了,VS调式不了JavaScript代码了。这两天一直在试终于搞定了。这里查找的问题当然主要是VS里面调式Jav...

19540

扫码关注云+社区

领取腾讯云代金券