vue-router的使用

创建 router.js

//导入 vue
import Vue from 'vue';
//导入 vue-router
import Router from 'vue-router';
import Home from './pages/home';
import Index from './pages/index';
import Product    from  './pages/product';
import Detail  from  './pages/detail';
import Cart  from  './pages/cart';
import Order  from  './pages/order';
import OrderConfirm  from  './pages/orderConfirm';
import OrderList  from  './pages/orderList';
import OrderPay   from  './pages/orderPay';
import AliPay   from  './pages/aliPay';
//使用 
Vue.use(Router);

export default new Router({
   routes:[
       {
           path:'/',
           name:'home',
           component:Home,
           //重定向
           redirect:'/index',
           children:[
               {
                   path:'index',
                   name:'index',
                   component:Index
               },
               {
                   path:'product/:id',
                   name:'product',
                   component:Product
               },
               {
                   path:'detail/:id',
                   name:'detail',
                   component:Detail
               }
           ]
       },
       {
           path:'/cart',
           name:'cart',
           component:Cart
       },
       {
           path:'/order',
           name:'order',
           component:Order,
           children:[
               {
                   path:'list',
                   name:'order-list',
                   component:OrderList
               },
               {
                   path:'confirm',
                   name:'order-confirm',
                   component:OrderConfirm
               },
               {
                   path:'pay',
                   name:'order-pay',
                   component:OrderPay
               },
               {
                   path:'alipay',
                   name:'alipay',
                   component:AliPay
               }

           ]
       }
   ]
});

然后在main.js 中导入并使用

import Vue from 'vue'
import App from './App.vue'
//导入 router.js
import router from './router'

Vue.config.productionTip = false

new Vue({
  //使用  名字一致 router,    不一致  router: 别名 ,
  router,
  render: h => h(App),
}).$mount('#app')