【mpvue】模拟路由

在git上放了一个修改后的项目

POST : https://github.com/canwhite/mpvue

 

用了mpvue之后发现vue-router不能用了

页面的跳转需要借助a标签

<a href="/pages/hellovue/main" class="hello">hello vue test</a>

页面需要跳转前需要先在app.json中注册

{

  "pages": [

    "pages/index/main",

    "pages/logs/main",

    "pages/counter/main",

    "pages/hellovue/main"

  ],

  "window": {

    "backgroundTextStyle": "light",

    "navigationBarBackgroundColor": "#fff",

    "navigationBarTitleText": "WeChat",

    "navigationBarTextStyle": "black"

  }

}

 

感觉这样写详情页很方便，但是解决嵌套问题会很奇怪

所有就想着能不能实现像有vue-router的时候那样实现并行结构

 

自己想和看了一些别人的思路，可能小范围内的变化比较好的情况就是使用v-if，和通过设置page值判断跳转了

毕竟是小程序

 

 

<template>

  <div  class="container" @click="clickHandle('test click', $event)">

 

    <div v-if="page==0">

      <div class="usermotto">

        <div class="user-motto">

          <card :text="motto"></card>

        </div>

      </div>

 

      <form class="form-container">

        <input type="text" class="form-control" v-model="motto" placeholder="v-model" />

        <input type="text" class="form-control" v-model.lazy="motto" placeholder="v-model.lazy" />

      </form>

      <a href="/pages/counter/main" class="counter">去往Vuex示例页面</a>

      <a href="/pages/hellovue/main" class="hello">hello vue test</a>

    </div>

 

    <div v-if="page==1">

      <count></count>

    </div>

 

    <div v-if="page==2">

      <mine></mine>

    </div>

 

    <div class="tabs">

 

      <ul>

        <li @click="goPage(0)">

          <div><img style="width:20px;height:20px;" src='../../../static/images/nav_manage.png'></div>

          <div>首页</div>

        </li>

        <li @click="goPage(1)">

          <div><img style="width:20px;height:20px;" src='../../../static/images/nav_manage.png'></div>

          <div>计数</div>

        </li>

        <li @click="goPage(2)">

          <div><img style="width:20px;height:20px;" src='../../../static/images/nav_manage.png'></div>

          <div>我的</div>

        </li>

      </ul>

    </div>

  </div>

</template>

 

 

<script>

import card from '@/components/card'

import count from '@/components/MyCount'

import mine from '@/components/AboutMe'

 

export default {

  data () {

    return {

      motto: 'Hello World',

      page:0,

      userInfo: {},

    }

  },

 

  components: {

    card,

    count,

    mine

 

  },

 

  methods: {

    bindViewTap () {

      const url = '../logs/main'

      wx.navigateTo({ url })

    },

    goPage(i){

      this.page = i

      console.log(this.page)

    },

    clickHandle (msg, ev) {

      console.log('clickHandle:', msg, ev)

    },

  },

 

}

</script>

 

 

<style scoped>

.usermotto {

  margin-top: 50px;

}

.form-control {

  display: block;

  padding: 0 12px;

  margin-bottom: 5px;

  border: 1px solid #ccc;

}

.counter {

  display: inline-block;

  margin: 10px auto;

  padding: 5px 10px;

  color: blue;

  border: 1px solid blue;

}

.hello {

  border:1px solid blue;

  margin:10 px auto;

  padding:5px 10px;

  color:blue;

}

 

.tabs{

  position:fixed;

  bottom:0;

  left:0;

  background-color:#fff;

  box-shadow: 0 2px 4px #000;

  width: 100%;

}

ul{

  display: table;

  width: 100%;

}

ul>li{

  text-align: center;

  font-size: 10px;

  display: table-cell;

  padding: 8px 12px;

}

 

</style>

 

最后的实现效果是这样的