美文网首页
Vue的一级路由和二级路由

Vue的一级路由和二级路由

作者: 逍遥_6b76 | 来源:发表于2018-10-24 22:03 被阅读0次

    1、package.json包中

    2、在main.js中引用

    其次:一级路由的配置

    import Vuefrom 'vue';

    import Routerfrom 'vue-router';

    Vue.use(Router);

    export default new Router({

    //去除路径中的#标志

      mode:"history",

    //以及路由

    routes: [

    {

    //专题详情页面

      path:'/c/:id',

    component: resolve => require(['../components/common/ZhuanTi.vue'], resolve),

    meta: {title:'专题详情'}

    },

    {

    //文章详情页面

      path:'/p/:id',

    component: resolve => require(['../components/common/Essay.vue'], resolve),

    meta: {title:'文章详情'}

    },

    {

    // 个人中心组件

      path:'/u',

    component: resolve => require(['../components/page/User.vue'], resolve),

    meta: {title:'个人中心'}

    },

    ]

    最后:二级路由的配置

    import Vuefrom 'vue';

    import Routerfrom 'vue-router';

    Vue.use(Router);

    export default new Router({

    //去除路径中的#标志

      mode:"history",

    //一级路由

      routes: [

    {

    //消息组件(一级路由)

      path:'/notifications',

    component: resolve => require(['../components/page/Notifications.vue'], resolve),

    meta: {title:'消息'},

    //二级路由开始

    children:[

    {

    path:'/comments',

    component: resolve => require(['../components/pinglun/PingLun.vue'], resolve),

    meta: {title:'评论'},

    },

    {

    path:'/chats',

    component: resolve => require(['../components/pinglun/JianXin.vue'], resolve),

    meta: {title:'简信'},

    },

    {

    path:'/requests',

    component: resolve => require(['../components/pinglun/TouGao.vue'], resolve),

    meta: {title:'投稿请求'},

    },

    {

    path:'/likes',

    component: resolve => require(['../components/pinglun/Like.vue'], resolve),

    meta: {title:'喜欢和赞'},

    },

    {

    path:'/follows',

    component: resolve => require(['../components/pinglun/GuanZhu.vue'], resolve),

    meta: {title:'关注'},

    }

    {

    path:'/others',

    component: resolve => require(['../components/pinglun/TiXing.vue'], resolve),

    meta: {title:'提醒'},

    }

    ]

    },

    ]

    相关文章

      网友评论

          本文标题:Vue的一级路由和二级路由

          本文链接:https://www.haomeiwen.com/subject/omlftqtx.html