创建 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')