美文网首页
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:'提醒'},

}

]

},

]

相关文章

  • 多级路由

    目录结构: 使用 一级路由 二级路由 main.js index.js(路由文件) App.vue Banner....

  • 6、路由跳转之二级路由children的实现入门版

    在vue项目中,经常会用到路由跳转,二级路由更是必须要掌握的,下面给大家分享一下二级路由是实现二级路由是建立在一级...

  • 多级路由间互相访问问题

    基于安全性因素,二级路由可以直接访问一级路由资源,一级路由不可以直接访问二级路由。 比如有两个路由,分别是一级路由...

  • 12.Vue嵌套路由(三层)

    Vue嵌套路由:实现效果(路由三层嵌套,点击一级tab显示二级tab效果,二级tab点击切换对应内容,不在tab区...

  • 一级二级 Route 匹配

    一级路由navbar始终存在,二级路由的navBarHome显示的前提是在一级路由中匹配到相应的路由,渲染相应组件...

  • vue二级路由的设置

    项目当中使用vue的时候一定会用到路由,并且二级路由甚至三集路由的需求都是刚需,当然,多级路由的配置方法和二级的是...

  • Vue的一级路由和二级路由

    1、package.json包中 2、在main.js中引用 其次:一级路由的配置 import Vuefrom ...

  • Vue的一级路由和二级路由

    首先:添加相关依赖 1、package.json包中 2、在main.js中引用 其次:一级路由的配置 impor...

  • Vue SSR 项目 Nuxt.js 框架之《路由》

    # 前言 本篇文章主要介绍nuxt的路由,包括一级路由二级路由三级路由...等,以及对应等级路由的创建方式和文件及...

  • vue实现多级路由的思维

    一级路由包含二级路由再包含更多的子路由,需要缓存的页面用keepalive 包括就OK,但是每次回到上级路由,是否...

网友评论

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

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