javascript - Weex中无法使用Vue-router的疑问

问题描述

问 题

环境描述

node版本为：6.10.2
weex版本为：1.0.5
package.json:为

  "dependencies": {
    "vue": "^2.1.8",
    "vue-router": "^2.1.1",
    "vuex": "^2.1.1",
    "vuex-router-sync": "^4.0.1",
    "weex-vue-render": "^0.11.2"
  },
  "devDependencies": {
    "babel-core": "^6.20.0",
    "babel-loader": "^6.2.9",
    "babel-preset-es2015": "^6.18.0",
    "css-loader": "^0.26.1",
    "ip": "^1.1.4",
    "serve": "^1.4.0",
    "vue-loader": "^10.0.2",
    "vue-template-compiler": "^2.1.8",
    "webpack": "^1.14.0",
    "weex-devtool": "^0.2.64",
    "weex-loader": "^0.4.1",
    "weex-vue-loader": "^0.2.5"
  }

项目配置

路由配置

/**
 * Created by Hans on 17/4/21.
 */
import Router from 'vue-router'
import Scroller from './views/Scroller.vue'
import WebView from './views/WebView.vue'

Vue.use(Router);

export default new Router({
    // mode: 'abstract',

    routes: [
        {path: '/', component: Scroller},
        {path: '/details', component: WebView}
    ]
});

mixnis的文件

/**
 * Created by Hans on 17/4/21.
 */
export default {
    methods: {
        jump (to) {
            console.log('debug:jump to' + to);
            if (this.$router) {
                console.log('debug:push' + to);
                this.$router.push(to)
            }
        }
    }
}

入口app.js配置

import Scroller from './src/views/Scroller.vue'
import mixins from './src/mix/index'
import router from  './src/router'

// register global mixins.
Vue.mixin(mixins);

new Vue(Vue.util.extend({ el: '#root', router }, Scroller));

router.push('/');

问题描述

当我在Scroller.Vue中点击item的时候，无法正确跳转到WebView.vue

<template>
    <div id="root">
        <div class="bar">
            <image class="bar_left"
                   src="http://gw.alicdn.com/tps/i2/TB1DpsmMpXXXXabaXXX20ySQVXX-512-512.png_400x400.jpg"></image>
            <text class="bar_title">知乎日报</text>
            <image class="bar_right"
                   src="http://gw.alicdn.com/tps/i2/TB1DpsmMpXXXXabaXXX20ySQVXX-512-512.png_400x400.jpg"></image>
        </div>
        <div class="divide"></div>
        <scroller class="scroller">
            <div class="row" v-for="(obj, index) in titles" @click="jump('details')">
                <!--当控件属性来自v-for时候，需要使用v-bind。-->
                <!--v-bind:src可以简写为src-->
                <image class="text_img" v-bind:src="obj.image"></image>
                <text class="text">{{obj.title}}</text>
            </div>

        </scroller>
    </div>
</template>

....//省略代码

日志查看

通过日志查看，的确jump方法被调用了。
但是无法路由

疑问

• 个人觉得应该是我的路由配置错误了，请问如何配置呢？

• vue-router和weex-router有何区别

个人已经查看了很多demo工程，由于是Android出身，对web可能不是非常了解，所以无法感悟出窍门来，希望能够得到指导。谢谢！！！

解决方案

同Android开发，最近一个月学习了Vue。

1. 路由跳转时需要指定路由的path或者name.

2. template模板中需要有<router-view></router-view>标签来承载组件.

你的问题主要是没有<router-view></router-view>标签.

路由规则如下:

routes: [
    {path: '/', component: Scroller},
    {path: '/details', name: 'details', component: WebView}
]

跳转方法:

// 按照name跳转
this.$router.push({name: 'details'})

// 按照path跳转
this.$router.push({path: '/details'})

这篇关于javascript - Weex中无法使用Vue-router的疑问的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！