javascript - Question sur l'impossibilité d'utiliser Vue-Router dans Weex

Question

Description de l'environnement

la version du nœud est : 6.10.2
la version weex est : 1.0.5
package.json : is

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

Configuration du projet

Configuration du routage

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

fichiers 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)
            }
        }
    }
}

Configuration de l'application.js d'entrée

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

Description du problème

Lorsque je clique sur l'élément dans Scroller.Vue, je ne parviens pas à accéder correctement à 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>

....//省略代码

Vue du journal

En parcourant le journal, il est vrai que la méthode jump a été appelée.
Mais impossible d'acheminer

Questions

• Personnellement, je pense que ma configuration de routage est erronée. Comment la configurer ?

• Quelle est la différence entre vue-router et weex-router

J'ai consulté de nombreux projets de démonstration. Comme je suis sous Android, je ne connais peut-être pas grand-chose au Web, donc je n'arrive pas à comprendre l'astuce, j'espère pouvoir obtenir des conseils. Merci! ! !

Answer 1

Comme pour le développement Android, j'ai appris Vue au cours du mois dernier.

1. Vous devez préciser le chemin ou le nom de l'itinéraire lors du saut.

2. Le modèle doit avoir la balise <router-view></router-view> pour héberger le composant.

Votre problème est principalement qu'il n'y a pas de balise <router-view></router-view>

Les règles de routage sont les suivantes :

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

Méthode de saut :

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

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

Answer 2

Vous appelez jump('details') et changez-le en jump('/details'). Cela correspond au chemin défini dans vos itinéraires. Essayez-le

.