router

常规的引入使用

import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);
const routes = [
{
path: "/",
name: "home",
component: Home,
meta: {title: '首页'}

},
{
    path: "detail",
    name: "detail",
    component: detail,
    meta: {title: '商品详情'}
},
{
    path: 'lists',
    name: 'lists',
    component: lists,
    meta: {title: '商品列表'}

},
{
    path: 'cate',
    name: 'cate',
    component: cate,
    meta: {title: '商品分类'}

},
{
    path: 'shopcar',
    name: 'shopcar',
    component: shopcar,
    meta: {title: '购物车', auth: true}
},
{
    path: 'mypage',
    name: 'mypage',
    component: mypage,
    meta: {title: '我的', auth: true}

},
{
    path: '/reg',
    name: 'reg',
    component: reg,
    meta: {title: '注册'}
},
{
    path: '/login',
    name: 'login',
    component: login,
    meta: {title: '登陆页面'}
},
{
    path:'/buy/:onum',
    name:'buy',
    component:()=>import('../views/content/buy'),
    meta:{title:'订单页面',auth:true}
},
{
    path:'/buy/:onum',
    name:'buyafter',
    component:()=>import('../views/content/buyafter'),
    meta:{title:'订单页面',auth:true}
},
//订单状态的组件
{
    path:'/OrdersAll',
    name:'OrdersAll',
    component: OrdersAll,
    meta:{title:'全部',auth:true}
},
{
    path:'/OrdersPay',
    name:'OrdersPay',
    component: OrdersPay,
    meta:{title:'待付款',auth:true}
},
{
    path:'/OrdersSend',
    name:'OrdersSend',
    component: OrdersSend,
    meta:{title:'待发货',auth:true}
},
{
    path:'/OrdersReceive',
    name:'OrdersReceive',
    component: OrdersReceive,
    meta:{title:'待收货',auth:true}
},
{
    path:'/OrdersSuccess',
    name:'OrdersSuccess',
    component: OrdersSuccess,
    meta:{title:'完成',auth:true}
},
//练习
{
    path:'/demo1',
    name:'demo1',
    component:demo1
},

];

const router = new VueRouter({
routes,

});
router.beforeEach((to, from, next) => {
document.title = to.meta.title || '零食小屋';
if (to.meta.auth) {
let token = sessionStorage.getItem('token') && sessionStorage.getItem('token').trim();
if (token) {
next();
} else {
next({path: '/login', query:{redirect: to.name}});
}
} else {
next();
}
});

export default router;

<router-view>

默认使用组件区分

该组件写在哪里，路由匹配到的组件将显示在这里
<router-view :key="$route.path"/>  //以路由的路径来区分