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 相关文章推荐
动态改变textbox的宽高的js
Oct 26 Javascript
30分钟就入门的正则表达式基础教程
Feb 25 Javascript
jQuery获取当前对象标签名称的方法
Feb 07 Javascript
js实现二代身份证号码验证详解
Nov 20 Javascript
Jquery实现鼠标移动放大图片功能实例
Mar 25 Javascript
详解JavaScript对象序列化
Jan 19 Javascript
利用Javascript仿Excel的数据透视分析功能
Sep 07 Javascript
解析Vue2.0双向绑定实现原理
Feb 23 Javascript
使用vue点击li,获取当前点击li父辈元素的属性值方法
Sep 12 Javascript
详解使用React.memo()来优化函数组件的性能
Mar 19 Javascript
node基于async/await对mysql进行封装
Jun 20 Javascript
laypage+SpringMVC实现后端分页
Jul 27 Javascript
如何利用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删除HTMl标签的三种解决方法
2013/06/30 PHP
php简单smarty入门程序实例
2015/06/11 PHP
PHP面向对象程序设计组合模式与装饰模式详解
2016/12/02 PHP
ThinkPHP5 框架引入 Go AOP,PHP AOP编程项目详解
2020/05/12 PHP
基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
2012/06/14 Javascript
javascript学习笔记(三) String 字符串类型介绍
2012/06/19 Javascript
浅析js中2个等号与3个等号的区别
2013/08/06 Javascript
js+cookies实现悬浮购物车的方法
2015/05/25 Javascript
如何实现移动端浏览器不显示 pc 端的广告
2015/10/15 Javascript
JQuery PHP图片在线裁剪实例
2020/07/27 Javascript
Vue.js 和 MVVM 的注意事项
2016/11/07 Javascript
详解微信小程序开发之城市选择器 城市切换
2017/01/17 Javascript
Centos6.8下Node.js安装教程
2017/05/12 Javascript
JavaScript实现简单生成随机颜色的方法
2017/09/21 Javascript
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
2018/01/17 Javascript
基于vue2的canvas时钟倒计时组件步骤解析
2018/11/05 Javascript
解决vue组件props传值对象获取不到的问题
2019/06/06 Javascript
node.JS路径解析之PATH模块使用方法详解
2020/02/06 Javascript
js实现简单音乐播放器
2020/06/30 Javascript
基于javascript实现移动端轮播图效果
2020/12/21 Javascript
[02:16]DOTA2英雄基础教程 干扰者
2014/01/15 DOTA
[01:48:04]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第一场 2月7日
2021/03/11 DOTA
python列表操作实例
2015/01/14 Python
Python函数式编程指南(一):函数式编程概述
2015/06/24 Python
Android模拟器无法启动,报错:Cannot set up guest memory ‘android_arm’ Invalid argument的解决方法
2016/07/01 Python
Python 操作mysql数据库查询之fetchone(), fetchmany(), fetchall()用法示例
2019/10/17 Python
Jupyter安装拓展nbextensions及解决官网下载慢的问题
2021/03/03 Python
CSS3 border-radius圆角的实现方法及用法详解
2020/09/14 HTML / CSS
PHP如何防止SQL注入
2014/05/03 面试题
物理教师自荐信范文
2013/12/28 职场文书
小学运动会广播稿200字(十二篇)
2014/01/14 职场文书
2014年财务人员工作总结
2014/11/11 职场文书
2015年英语教师工作总结
2015/05/20 职场文书
Python写情书? 10行代码展示如何把情书写在她的照片里
2022/04/21 Python
java.util.NoSuchElementException原因及两种解决方法
2022/06/28 Java/Android
Oracle中日期的使用方法实例
2022/07/07 Oracle