vue-router 起步步驟

1.在main.js中導入vue-router和組件

import VueRouter from 'vue-router'; // 導入vue-router並將它命名爲VueRouter
import goods from './components/goods/goods'; // 引入組件
import seller from './components/seller/seller';

2.爲組件設置URL,經過url能夠動態的加載組件

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

3.配置vue-router對象並掛載

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

4.配置鏈接的出口,實現動態的加載組件

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

如今,能夠經過url動態加載咱們的組件

5.將鏈接入口,掛載到網頁上

<router-link  to="/goods">商品</router-link> //本質上是個a標籤,to關聯了跳轉的url

能夠經過點擊商品和評論完成頁面局部的刷新

步驟總結

1.在main.js中導入vue-router和自定義的組件
2.常量定義url和組件的關聯
3.建立vue-router對象並導入組件關係,並註冊
4.在模板中定義渲染的出口 <router-view></router-view> 和
入口<router-link to=" ">xxx</router-link> ()
官方起步文檔:https://router.vuejs.org/zh/g...