脚本宝典收集整理的这篇文章主要介绍了weex踩坑之旅第二弹 ~ 在weex中集成vue-router，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

接着第一弹讲，我们已经搭建好一个属于自己的weex项目了，然后如何开发呢？由于之前项目中都是采用vue全家桶进行开发，路由使用vue-router插件，状态管理使用vuex，Ajax前后台交互使用axios，图标库使用font-awesome，组件库使用element-ui...但是这些插件能不能都在weex中集成呢？如果你也是一个web开发者，应该重点考虑这个问题，在浏览器中，我们需要把这个 JS bundle 作为一段 <script> 载入网页，在客户端里，我们把这段 JS bundle 载入本地，并通过 WeexSDK 直接执行。也就是说在native中，我们的代码是要在native环境中运行。而在native中，是没有document,window等DOM以及BOM的，即所有的DOM,BOM框架都是不可以使用的。比如jQuery相关组件，axios相关组件，element-ui等都不能在weex中引用。

vue-router是可以在weex中使用的。如果想开发具有导航功能的页面，可以考虑将vue-router继承到项目中

vue-router的集成

1. 安装vue-router

$ npm install vue-router --save

2. 创建路由组件页面

<template>     <div class="one">         <text>             {{msg}}         </text>     </div> </template> <script>     export default {         data:()=>({             msg:'this is one'         })     } </script>

代码结构如下

3. 集成

在src目录创建router目录，用于存放路由相关信息，然后在router中新建index.js。进行路由的配置以及与Router的集成，以下是src/router/index.js的代码

import Router From 'vue-router' //组件导入 import ViewOne from '../pages/one/index.vue' import ViewTwo from '../pages/two/index.vue' import ViewThree from '../pages/three/index.vue' //将Vue-router继承到Vue中 Vue.use(Router); //提供默认对外接口 export default new Router({   // mode: 'abstract',   routes: [     { path: '/one', component: ViewOne },     { path: '/two', component: ViewTwo },     { path: '/three', component: ViewThree }   ] });

然后在entry.js中导入router的配置

import App from './App.vue' //引入路由配置 import router from './router' new Vue(Vue.util.extend({     el:'#root',         //将vue集成到vue中     router, },App)) 

4. 路由编程

在App.vue中提供<router-view>指令，用于显示路由信息

<template>     <div class='container'>         <!-- 标题 -->         <div class="panel tITlePanel">             <text class='title'>{{msg}}</text>         </div>         <!-- 导航区 -->       <div class="panel">           <text class='link' @click='linkTo("/one")'>one</text>           <text class='link' @click='linkTo("/two")'>two</text>           <text class='link' @click='linkTo("/three")'>three</text>       </div>       <!-- 视图区 -->     <router-view></router-view>     </div> </template> <script>     export default{         data(){             return {                 msg:'你好，weex'             }         },         methods:{             linkTo(path){                 //点击后改变路由                 this.$router.push(path);             }         }     } </script> <style> .container {     background-color:#f4f4f4; }  .panel {     flex-direction: row;     height: 100px;     border-bottom-width: 1px;     justify-content: space-between; } .titlePanel {     justify-content: center;     background-color: #ededed; } .title {     height: 100px;     line-height: 100px; } .link{     line-height: 100px;     text-align: center;     flex: 1 } </style>

运行效果

觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！&nbsp;vue，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的weex踩坑之旅第二弹 ~ 在weex中集成vue-router全部内容，希望文章能够帮你解决weex踩坑之旅第二弹 ~ 在weex中集成vue-router所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。