鍍金池/ 問答/HTML/ vue單文件組件怎么使用vur-router

vue單文件組件怎么使用vur-router

這是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謝謝

回答
編輯回答
萌面人

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

樓上各位提醒了我，自己著實是蠢了一把，沒給組件傳數據....，謝謝各位的熱心解答:)

2017年10月26日 15:19
編輯回答
骨殘心

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

2017年2月27日 16:51
編輯回答
糖豆豆

:to="{path:'/page'}"試一下,還不行就路由加一個父級路由

2018年4月19日 05:17
編輯回答
不將就

頁面跳轉了嗎

看錯誤信息是你page組件中有個e字段不存在，所以不能使用toString()方法。

你可以在使用這個方法的地方判斷一下e。

e? e.toString() : ""
2018年3月14日 15:31