vue单文件组件怎么使用vur-router

Question

这是main.js

import Vue from 'vue'
import projectView from './component/menu.vue'
import routerPath from './router.js'

new Vue({
    router: routerPath,
    el: '#coco',
    components: { projectView }
});

这是router.js

import Vue from 'vue'
import router from 'vue-router'
import pageManage from './component/page.vue'

Vue.use(router)
var routerPath = new router({
    base: __dirname,
    routes: [{
        path: '/page',
        component: pageManage
    }]
})
export default routerPath

这是引用路由的地方

<template>
    <div style="width:100%;height:100%;">
        <div class="menu_contain">
            <router-link to="/page" class="menu_level_one">Go to page</router-link>
        </div>
        <div class="app_view">
            <router-view></router-view>
        </div>
    </div>
</template>

---

页面渲染没问题，点击go to page 报错

实在不知道为啥了，求大神帮忙看一眼，O(∩_∩)O谢谢

Answer 1

这是page.vue里面的js部分

export default {

props: ['currentPage','totalPage','totalCount','leftData'],
filters:{
    /** 总数量千分 */
    numberThousanded:function(num){
        var arr = [];
        for(var s = 0 ; s < Math.ceil(num.toString().length/3) ; s++){
            arr.push(num.toString().substring(s*3,(s+1)*3));
        }
        return arr.join(',');
    }
},
methods:{
    pageRediret:function (num) {
        console.log(num);
        // this.$emit("page-change",num);//把内部变更告诉外部
    }
}

}

---

这是更改之后的router.js

---

import Vue from 'vue'
import router from 'vue-router'
import pageManage from './component/page.vue'

Vue.use(router)
var routerPath = new router({

base: __dirname,
routes: [{
    path: '/page',
    component: pageManage,
    props: { currentPage: 4, totalPage: 24, totalCount: 360, leftData: 'test123123' }
}]

})
export default routerPath

---

楼上各位提醒了我，自己着实是蠢了一把，没给组件传数据....，谢谢各位的热心解答:)

Answer 2

页面跳转了吗

看错误信息是你page组件中有个e字段不存在，所以不能使用toString()方法。

你可以在使用这个方法的地方判断一下e。

e? e.toString() : ""

Answer 3

<router-link to="#/page" class="menu_level_one">Go to page</router-link>

Answer 4

:to="{path:'/page'}"试一下,还不行就路由加一个父级路由