
2、配置路由,router.js代码如下
- import Vue from 'vue'
- 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 router from './router'
- import App from './App.vue'
- Vue.config.productionTip = false
- new Vue({
- router,
- render: h => h(App),
- }).$mount('#app')