vue-router 起步步驟詳解

import VueRouter from 'vue-router'; // 導(dǎo)入vue-router并將它命名為VueRouter
import goods from './components/goods/goods'; // 引入組件
import seller from './components/seller/seller';

const urls = [
 { path: '/goods', component: goods },
 { path: '/rating', component: rating },
 { path: '*', redirect: '/goods' } //無效路徑重點(diǎn)向到'/goods'
];//定義一個(gè)常量來將url和組件綁定起來

const router = new VueRouter( //新建一個(gè)vue-router對(duì)象
 {
 routes: urls 將組件 (components) 映射到路由 (routes)，
 }
);
 new Vue({
 el: '#app',
 router, //注冊(cè)你新建的vue-router對(duì)象
 render: h => h(App)
});

<router-view></router-view> //通過模板中放置元素來確定vue-router渲染組件的位置

<router-link to="/goods">商品</router-link> //本質(zhì)上是個(gè)a標(biāo)簽,to關(guān)聯(lián)了跳轉(zhuǎn)的url