vue-router vue路由中的问题(坑)

时间:2021-04-12 06:35:18

Error in render function: "TypeError: Cannot read property 'matched' of undefined"


webpack4.0.1中 ,也存在以下问题(注意点):

1、VueRouter实例化时的参数,可以简写为routes,表示routes:routes。但是要注意的是,“routes:routes”表示属性名是routes,值是routes。在这种情况下(属性名和值都是routes),可以简写。但是,不要误以为简写的 routes就是路由的变量名(数组名)。如果说你的数组名是myroutes,那么,正确写法是 routes:myroutes。

如下是正确示例:

var myroutes= [
        {path:"/",component:Hello},
        {path:"/h",component:Hello},
        {path:"/w",component:World}
    ];

const myroute = new VueRouter({

    routes:myroutes

});

2、官网上,实例化vue对象时,也使用了简写,如:

const app = new Vue({  

router

}).$mount('#app')

router等价于:router:router,也是因为,变量名和属性名一样,如果你的路由实例名不是router,则不要省略。

如下:

import {r} from "./router/index.js";//路由的配置
//使用第三方组件必须用use函数。
Vue.use(VueRouter);

new Vue({

    el:"#app",
    router:r,
    render:(h)=>{
        return h(App)
    }
});