vue-路由精讲 二级路由和三级路由的作用


Posted in Javascript onAugust 06, 2020

1、我们继续上一个案例 vue -- 路由精讲制作导航 -- 从无到有 ,在 about文件夹下 创建一些文件夹。如下:

vue-路由精讲 二级路由和三级路由的作用

2、编写about.vue代码。当我们点击导航中 “关于我们” ,就会显示该部分内容。代码中写了四个可供点击后可以跳转的模块。和 <router-view></router-view> 表示你点击了哪个组件,哪个组件就会渲染到这里来。

其中注意:css样式,我们直接引入bootstrap中的导航的样式,在标签中直接添加class属性的值就可以了。

about.vue代码

<template>
  <div>
    <div class="row mb-5">  //row 代表行, mb-5 表示margin-bottom距离下面5
      <!-- 导航 -->
      <div class="col-4"> //四列
        <div class="list-group mb-5">
          <router-link tag="li" class="nav-link" :to="{name:'historyLink'}">
            <a class="list-group-item list-group-item-action">历史订单</a>  
          </router-link>
          <router-link tag="li" class="nav-link" :to="{name:'contactLink'}">
            <a class="list-group-item list-group-item-action">联系我们</a>  
          </router-link>
          <router-link tag="li" class="nav-link" :to="{name:'orderingGuideLink'}">
            <a class="list-group-item list-group-item-action">点餐文档</a>  
          </router-link>
          <router-link tag="li" class="nav-link" :to="{name:'deliveryLink'}">
            <a class="list-group-item list-group-item-action">快递信息</a>  
          </router-link>
        </div>
      </div>
      <!-- 导航所对应的内容 -->
      <div class="col-8"> //8列
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

3、配置二级路由和三级路由

注意:我们要在about页面下添加四个路由,用到 children 属性, 而且还用到 redirect 属性,默认跳转到指定路由,具体操作看代码和注释。

main.js代码

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import Home from './components/Home.vue'
import Menu from './components/Menu.vue'
import Admin from './components/Admin.vue'
import About from './components/about/About.vue'
import Login from './components/Login.vue'
import Register from './components/Register.vue'

//二级路由
import Contact from './components/about/Contact.vue'
import Delivery from './components/about/Delivery.vue'
import History from './components/about/History.vue'
import OrderingGuide from './components/about/OrderingGuide.vue'

//三级路由
import Phone from './components/about/contact/Phone.vue'
import PersonName from './components/about/contact/PersonName.vue'

Vue.use(VueRouter)

核心代码 二级路由和三级路由的跳转

const routes = [
  {path:'/',   name:'homeLink',  component:Home},
  {path:'/menu', name:'menuLink',  component:Menu},
  {path:'/admin', name:'adminLink', component:Admin},
  {path:'/about', name:'aboutLink', redirect:'/about/contact', component:About, children:[      










 //表示about页面中默认跳转到/about/contact 这个路由页面下。
    {path:'/about/contact', name:'contactLink', redirect:'/personName', component:Contact, children:[











 //在/about/contact页面中默认展现三级路由personName 的内容。
      {path:'/phone', name:"phoneNumber", component:Phone},
      {path:'/personName', name:"personName", component:PersonName},
    ]},
    {path:'/history',name:'historyLink',component:History},
    {path:'/delivery',name:'deliveryLink',component:Delivery},
    {path:'/orderingGuide',name:'orderingGuideLink',component:OrderingGuide},
  ]},
  {path:'/login', name:'loginLink', component:Login},
  {path:'/register', name:'registerLink', component:Register},
  // {path:'*',redirect:'/'},
]

const router = new VueRouter({
  routes,
  mode:'history'
})

new Vue({
 el: '#app',
 router,
 render: h => h(App)
})

Contact.vue代码

<template>
  <div class="card text-dark bg-light mb-3">
    <div class="card-header">联系我们</div>
    <div class="card-body">
      <h4 class="card-title">联系我们</h4>
      <p class="card-text">1623487989@qq.com</p>

      <router-link :to="{name:'phoneNumber'}">电话</router-link>
      <router-link :to="{name:'personName'}">联系人</router-link>

      <router-view></router-view>
    </div>
  </div>
</template>

Delivery.vue代码

<template>
  <div class="card text-dark bg-light mb-3">
    <div class="card-header">快递信息</div>
    <div class="card-body">
      <h4 class="card-title">快递信息</h4>
      <p class="card-text">1623487989@qq.com</p>
    </div>
  </div>
</template>

History.vue代码

<template>
  <div class="card text-dark bg-light mb-3">
    <div class="card-header">历史订单</div>
    <div class="card-body">
      <h4 class="card-title">历史订单</h4>
      <p class="card-text">1623487989@qq.com</p>
    </div>
  </div>
</template>

OrderingGuide.vue代码

<template>
  <div class="card text-dark bg-light mb-3">
    <div class="card-header">点餐文档</div>
    <div class="card-body">
      <h4 class="card-title">点餐文档</h4>
      <p class="card-text">1623487989@qq.com</p>
    </div>
  </div>
</template>

Phone.vue代码

<template> <h1>400040040404404</h1> </template>

PersonName.vue代码

<template> <h1>小劭</h1> </template>

补充知识:vue:菜单收缩功能

想要实现:点击菜单能收缩。(效果如下:)

点击前:

vue-路由精讲 二级路由和三级路由的作用

点击后:

vue-路由精讲 二级路由和三级路由的作用

思路:

首先我们要知道绅缩的按钮和菜单是否在一个页面。在一个页面就简单了。

如果不在一个页面,就会涉级到父子级传参,绅缩按钮模块中要把状态传给header,这是兄弟间的传递参数,需要用到 vuex。如果不用vuex的话,就通过主体去操作。绅缩按钮把状态传给主体是子传父,通过 this.$emit()。主体把状态传给菜单,是父传子,通过props ,菜单中需要接收主体中传过来的东西,要在 data 中定义props 在里面定义type、required、default。如果不清楚props 是啥,请百度。

操作:

1、先看整体布局

vue-路由精讲 二级路由和三级路由的作用

2、menu 模块

vue-路由精讲 二级路由和三级路由的作用

3、header 模块

vue-路由精讲 二级路由和三级路由的作用

以上这篇vue-路由精讲 二级路由和三级路由的作用就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
19个很有用的 JavaScript库推荐
Jun 27 Javascript
js 上下左右键控制焦点(示例代码)
Dec 14 Javascript
jsPDF导出pdf示例
May 02 Javascript
js获取select默认选中的Option并不是当前选中值
May 07 Javascript
使用jQuery设置disabled属性与移除disabled属性
Aug 21 Javascript
JavaScript中使用指数方法Math.exp()的简介
Jun 15 Javascript
BootStrap Progressbar 实现大文件上传的进度条的实例代码
Jun 27 Javascript
详解webpack+vue-cli项目打包技巧
Jun 17 Javascript
详解Vue学习笔记入门篇之组件的内容分发(slot)
Jul 17 Javascript
微信小程序之蓝牙的链接
Sep 26 Javascript
使用js实现将后台传入的json数据放在前台显示
Aug 06 Javascript
vue穿梭框实现上下移动
Jan 29 Vue.js
如何利用javascript接收json信息并进行处理
Aug 06 #Javascript
浅谈vue 二级路由嵌套和二级路由高亮问题
Aug 06 #Javascript
vue项目实现设置根据路由高亮对应的菜单项操作
Aug 06 #Javascript
javascript实现时间日期的格式化的方法汇总
Aug 06 #Javascript
vue+ElementUI 关闭对话框清空验证,清除form表单的操作
Aug 06 #Javascript
javascript读取本地文件和目录方法详解
Aug 06 #Javascript
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
Aug 06 #Javascript
You might like
PHP 远程文件管理,可以给表格排序,遍历目录,时间排序
2009/08/07 PHP
PHP实现邮件群发的源码
2013/06/18 PHP
php ImageMagick windows下安装教程
2015/01/26 PHP
php+MySQL实现登录时验证登录名和密码是否正确
2016/05/10 PHP
Javascript在IE和FireFox中的不同表现简析
2012/12/03 Javascript
Three.js源码阅读笔记(物体是如何组织的)
2012/12/27 Javascript
js获取IP和PcName(IE)在vs中可用
2013/08/02 Javascript
json格式的时间显示为正常年月日的方法
2013/09/08 Javascript
JS实现网页背景颜色与select框中颜色同时变化的方法
2015/02/27 Javascript
基于jQuery实现多层次的手风琴效果附源码
2015/09/21 Javascript
jQuery监听浏览器窗口大小的变化实例
2017/02/07 Javascript
JS+HTML实现的圆形可点击区域示例【3种方法】
2018/08/01 Javascript
JS获取本地地址及天气的方法实例小结
2019/05/10 Javascript
jQuery实现的点击显示隐藏下拉菜单功能完整示例
2019/05/17 jQuery
使用Vue调取接口,并渲染数据的示例代码
2019/10/28 Javascript
vue el-tree 默认展开第一个节点的实现代码
2020/05/15 Javascript
详解Vue中的MVVM原理和实现方法
2020/07/15 Javascript
Python利用ansible分发处理任务
2015/08/04 Python
Python的Flask站点中集成xhEditor文本编辑器的教程
2016/06/13 Python
Python实现简单过滤文本段的方法
2017/05/24 Python
python3.6环境安装+pip环境配置教程图文详解
2019/06/20 Python
Django 中自定义 Admin 样式与功能的实现方法
2019/07/04 Python
如何用OpenCV -python3实现视频物体追踪
2019/12/04 Python
python3中numpy函数tile的用法详解
2019/12/04 Python
浅谈Python 命令行参数argparse写入图片路径操作
2020/07/12 Python
CSS3制作翻转效果_动力节点Java学院整理
2017/07/11 HTML / CSS
实例讲解使用SVG制作loading加载动画的方法
2016/04/05 HTML / CSS
HTML5 video 上传预览图片视频如何设置、预览视频某秒的海报帧
2018/08/28 HTML / CSS
LINUX下线程,GDI类的解释
2012/04/17 面试题
GC是什么?为什么要有GC?
2013/12/08 面试题
在校生钳工实习自我鉴定
2013/09/19 职场文书
机械工程师的岗位职责
2013/11/17 职场文书
服装店营销方案
2014/03/10 职场文书
教师党的群众路线教育实践活动学习笔记
2014/11/05 职场文书
干部培训简讯
2015/07/20 职场文书
Mysql分库分表之后主键处理的几种方法
2022/02/15 MySQL