weex使用vue-router

文档目录：

---

特别说明 ：该路由用的配置用浏览器打开项目，无法实现跳转，
特别说明 ： 但在android studio 的虚拟机上可以实现路由字有跳转

步骤：
1.src/a.vue文件(这是自己新建的文件)

<template>
    <div><text>a</text></div>
</template>
<script>
</script>
<style  scoped></style>

2.src/test.vue文件(这是自己新建的文件)

<template>
    <div><text>test</text></div>
</template>
<script>
</script>
<style  scoped></style>

3.src/router(这是自己新建的文件)

//如果你的项目中没有vue-router需要去安装=> npm install vue-router
import Router from "vue-router"; 
var App = require("./index.vue");
var Test = require("./test.vue");
var A = require("./a.vue");
Vue.use(Router);
export default new Router({
  routes: [
    {
      path: "/",
      redirect: "/test",
    },
    {
      path: "/test",
      component: Test,
    },
    {
      path: "/a",
      component: A,
    },
  ],
});

4.src/index.vue(WEEX项目中自带的)

<template>
  <div class="wrapper">
    <text @click="update" class="greeting">The environment is ready!</text>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: "App",
  methods: {
    update: function (e) {
      this.target = "Weex";
      console.log("target:", this.target);
      this.$router.push("a");   //android跳转路由
    },
  },
};
</script>

5.在configs/congig.js，将文件改成这样

 contents += `import App from '${relativeVuePath}'
  - App.el = "#root";
  - new Vue(App);
  + import router from "@/src/router.js";
  + new Vue(Vue.util.extend({ el: "#root", router }, App));
  + router.push("/test"); 
`;
//router.push 这里是为了默认加载test.vue的内容,
//因为index.vue中仅仅使用了roter-view作为渲染模版,不然看上去会是空白的。

6.效果图：
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201203140050790.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY4NTExMg==,size_16,color_FFFFFF,t_70)点击前是组件“test”

![在这里插入图片描述](https://img-blog.csdnimg.cn/20201203140225366.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY4NTExMg==,size_16,color_FFFFFF,t_70)点击后的为组件“a”