javascript - Soalan tentang tidak dapat menggunakan Vue-router dalam Weex

Question

Penerangan alam sekitar

versi nod ialah: 6.10.2
versi mingguan ialah: 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"
  }

Konfigurasi projek

Konfigurasi penghalaan

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

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

Konfigurasi app.js masuk

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

Penerangan masalah

Apabila saya mengklik pada item dalam Scroller.Vue, saya tidak boleh melompat ke WebView.vue dengan betul

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

....//省略代码

Log View

Melihat log, memang betul kaedah lompat itu dipanggil.
Tetapi tidak dapat laluan

Soalan

• Secara peribadi, saya rasa konfigurasi penghalaan saya salah.

• Apakah perbezaan antara vue-router dan weex-router

Saya telah menyemak banyak projek demo Memandangkan saya dari Android, saya mungkin tidak tahu banyak tentang web, jadi saya tidak dapat mengetahui helahnya. Terima kasih! ! !

Answer 1

Sama seperti pembangunan Android, saya telah mempelajari Vue pada bulan lalu.

1. Anda perlu menentukan laluan atau nama laluan semasa melompat.

2. Templat perlu mempunyai teg <router-view></router-view> untuk mengehoskan komponen.

Masalah anda terutamanya tiada teg <router-view></router-view>

Peraturan laluan adalah seperti berikut:

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

Kaedah lompat:

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

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

Answer 2

Anda memanggil lompat('detail') dan menukarnya kepada lompat('/details').