vue-router vue路由中的問題(坑)
阿新 • • 發佈:2019-01-07
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)
}
});