javascript – Frage, ob der Vue-Router in Weex nicht verwendet werden kann

Question

Umgebungsbeschreibung

Knotenversion ist: 6.10.2
Weex-Version ist: 1.0.5
package.json: ist

  "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"
  }

Projektkonfiguration

Routing-Konfiguration

/**
 * 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-Dateien

/**
 * 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)
            }
        }
    }
}

Entrance app.js-Konfiguration

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('/');

Problembeschreibung

Wenn ich in Scroller.Vue auf das Element klicke, kann ich nicht richtig zu WebView.vue springen

<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>

....//省略代码

Protokollansicht

Beim Durchsehen des Protokolls ist es wahr, dass die Sprungmethode aufgerufen wurde.
Aber Route nicht möglich

Fragen

• Ich persönlich denke, dass meine Routing-Konfiguration falsch ist.

• Was ist der Unterschied zwischen Vue-Router und Weex-Router?

Ich habe mir viele Demo-Projekte angesehen, da ich von Android komme und daher nicht viel über das Internet weiß. Ich hoffe, dass ich eine Anleitung bekomme. Danke! ! !

Answer 1

同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'})

Answer 2

你调用jump('details')，改成jump('/details'),和你routes里面定义的path对应一致了，试一下