javascript - Weex中無法使用Vue-router的疑問

Question

環境描述

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>
    <p id="root">
        <p 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>
        </p>
        <p class="pide"></p>
        <scroller class="scroller">
            <p 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>
            </p>

        </scroller>
    </p>
</template>

....//省略代码

日誌查看

透過日誌查看，的確jump方法被呼叫了。
但是無法路由

疑問

• 個人覺得應該是我的路由設定錯誤了，請問要如何設定呢？

• vue-router和weex-router有何差別

個人已經查看了很多demo工程，由於是Android出身，對web可能不是非常了解，所以無法感悟出竅門來，希望能夠得到指導。謝謝！ ！ ！

Answer 1

同Android開發，最近一個月學習了Vue。

1. 路由跳轉時需要指定路由的path或name.

2. template模板中需要有標籤來承載組件.

你的問題主要是沒有標籤.

路由規則如下:

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

跳轉方法:

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

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

Answer 2

你呼叫jump('details')，改成jump('/details'),和你routes裡面定義的path對應一致了，試試看