1. 程式人生 > >vue-router vue路由中的問題(坑)

vue-router vue路由中的問題(坑)

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