javascript - Question about not being able to use Vue-router in Weex

Question

Environment description

node version is: 6.10.2
weex version is: 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"
  }

Project configuration

Routing configuration

/**
 * 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’ files

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

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

Problem Description

When I click an item in Scroller.Vue, I cannot jump to WebView.vue correctly

<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

Checking the log, it is true that the jump method was called.
But unable to route

doubt

• Personally, I think my routing configuration is wrong. How do I configure it?

• What is the difference between vue-router and weex-router

I have looked at a lot of demo projects. Since I am from Android, I may not know much about the web, so I cannot figure out the trick. I hope to get guidance. Thanks! ! !

Answer 1

Same as Android development, I have learned Vue in the past month.

1. You need to specify the path or name of the route when jumping.

2. The template needs to have the <router-view></router-view> tag to host the component.

Your problem is mainly that there is no <router-view></router-view> tag.

The routing rules are as follows:

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

Jump method:

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

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

Answer 2

You call jump('details') and change it to jump('/details'). It corresponds to the path defined in your routes. Give it a try