Vue2学习之第六、七章——vue-router与ElementUI组件库

路由

  1. 理解: 一个路由(route)就是一组映射关系(key - value),多个路由需要路由器(router)进行管理。
  2. 前端路由:key是路径,value是组件。

1.基本使用

  1. 安装vue-router,命令:npm i vue-router

  2. 应用插件(在main.js中):

    // 引入Vue
    import Vue from 'vue'
    // 引入所有组件的父组件App
    import App from './App'
    //引入VueRouter
    import VueRouter from 'vue-router'
    // 引入路由器(在new Vue中router赋值)
    import router from './router'// 关闭生产提示
    Vue.config.productionTip = false
    // 应用插件
    Vue.use(VueRouter)// 创建vm
    new Vue({// el:'#app',render: h => h(App),router:router
    }).$mount('#app')
    
  3. 编写router配置项(新建一个js文件,引入到main.js中Vue中的router):

    //引入VueRouter
    import VueRouter from 'vue-router'
    //引入Luyou 组件
    import About from '../components/About'
    import Home from '../components/Home'//创建router实例对象,去管理一组一组的路由规则
    const router = new VueRouter({routes:[{path:'/about',component:About},{path:'/home',component:Home}]
    })//暴露router
    export default router
    
  4. (替换a标签)实现切换(active-class可配置高亮样式,to中为第3步中路由的path)

    <div class="list-group"><!-- 原始html中我们使用a标签实现页面的跳转 --><!-- <a class="list-group-item active" href="./about.html">About</a><a class="list-group-item" href="./home.html">Home</a> --><!-- Vue中借助router-link标签实现路由的切换 --><router-link class="list-group-item" active-class="active" to="/about">About</router-link><router-link class="list-group-item" active-class="active" to="/home">Home</router-link>
    </div>
    
  5. 指定展示位置

    <!-- 指定组件的呈现位置 -->
    <router-view></router-view>
    
  6. 举例

    <template><div><div class="row"><div class="col-xs-offset-2 col-xs-8"><div class="page-header"><h2>Vue Router Demo</h2></div></div></div><div class="row"><div class="col-xs-2 col-xs-offset-2"><div class="list-group"><!-- 原始html中我们使用a标签实现页面的跳转 --><!-- <a class="list-group-item active" href="./about.html">About</a><a class="list-group-item" href="./home.html">Home</a> --><!-- Vue中借助router-link标签实现路由的切换 --><router-link class="list-group-item" active-class="active" to="/about">About</router-link><router-link class="list-group-item" active-class="active" to="/home">Home</router-link></div></div><div class="col-xs-6"><div class="panel"><div class="panel-body"><!-- 指定组件的呈现位置 --><router-view></router-view></div></div></div></div></div>
    </template>
    

2.几个注意点

  1. 路由组件通常存放在pages文件夹,一般组件通常存放在components文件夹。
  2. 通过切换,“隐藏”了的路由组件,默认是被销毁掉的,需要的时候再去挂载。
  3. 每个组件都有自己的$route属性,里面存储着自己的路由信息。
  4. 整个应用只有一个router,可以通过组件的$router属性获取到。

3.多级路由(多级路由)

  1. 配置路由规则,使用children配置项:

    routes:[{path:'/about',component:About,},{path:'/home',component:Home,children:[ //通过children配置子级路由{path:'news', //此处一定不要写:/newscomponent:News},{path:'message',//此处一定不要写:/messagecomponent:Message}]}
    ]
    
  2. 跳转(要写完整路径):

    <router-link to="/home/news">News</router-link>
    

4.路由的query参数

  1. 传递参数

    <!-- 跳转并携带query参数,to的字符串写法 -->
    <router-link :to="/home/message/detail?id=666&title=你好">跳转</router-link><!-- 跳转并携带query参数,to的对象写法 -->
    <router-link :to="{path:'/home/message/detail',query:{id:666,title:'你好'}}"
    >跳转</router-link>
    
  2. 接收参数:

     <template><ul><li>消息编号:{{ this.$route.query.id }}</li><li>消息标题:{{ this.$route.query.title }}</li></ul></template>
    

5.命名路由

  1. 作用:可以简化路由的跳转。

  2. 如何使用

    1. 给路由命名:

      {path:'/demo',component:Demo,children:[{path:'test',component:Test,children:[{name:'hello' //给路由命名path:'welcome',component:Hello,}]}]
      }
      
    2. 简化跳转:

      <!--简化前,需要写完整的路径 -->
      <router-link to="/demo/test/welcome">跳转</router-link><!--简化后,直接通过名字跳转 -->
      <router-link :to="{name:'hello'}">跳转</router-link><!--简化写法配合传递参数 -->
      <router-link :to="{name:'hello',query:{id:666,title:'你好'}}"
      >跳转
      </router-link>
      

6.路由的params参数

  1. 配置路由,声明接收params参数

    {path:'/home',component:Home,children:[{path:'news',component:News},{component:Message,children:[{name:'xiangqing',path:'detail/:id/:title', //使用占位符声明接收params参数component:Detail}]}]
    }
    
  2. 传递参数

    <!-- 跳转并携带params参数,to的字符串写法 -->
    <router-link :to="/home/message/detail/666/你好">跳转</router-link>
    <!-- <router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{m.title}}</router-link> --><!-- 跳转并携带params参数,to的对象写法 -->
    <router-link :to="{name:'xiangqing',params:{id:666,title:'你好'}}"
    >跳转</router-link>
    

    特别注意:路由携带params参数时,若使用to的对象写法,则不能使用path配置项,必须使用name配置!

  3. 接收参数:

     <template><ul><li>消息编号:{{ this.$route.params.id }}</li><li>消息标题:{{ this.$route.params.title }}</li></ul></template>
    

7.路由的props配置

​ 作用:让路由组件更方便的收到参数

{name:'xiangqing',path:'detail/:id',component:Detail,//第一种写法:props值为对象,该对象中所有的key-value的组合最终都会通过props传给Detail组件// props:{a:900}//第二种写法:props值为布尔值,布尔值为true,则把路由收到的所有params参数通过props传给Detail组件// props:true//第三种写法:props值为函数,该函数返回的对象中每一组key-value都会通过props传给Detail组件props(route){return {id:route.query.id,title:route.query.title}}
}

8.<router-link>的replace属性

  1. 作用:控制路由跳转时操作浏览器历史记录的模式
  2. 浏览器的历史记录有两种写入方式:分别为pushreplacepush是追加历史记录,replace是替换当前记录。路由跳转时候默认为push
  3. 如何开启replace模式:<router-link replace ...>About</router-link>

9.编程式路由导航

  1. 作用:不借助<router-link> 实现路由跳转,让路由跳转更加灵活

  2. 具体编码:

    //$router的两个API
    this.$router.push({name:'xiangqing',params:{id:xxx,title:xxx}
    })this.$router.replace({name:'xiangqing',params:{id:xxx,title:xxx}
    })
    this.$router.forward() //前进
    this.$router.back() //后退
    this.$router.go() //可前进也可后退,在里面填写正数前进,负数后退
    

10.缓存路由组件

  1. 作用:让不展示的路由组件保持挂载,不被销毁。

  2. 具体编码:

     <!-- 缓存多个路由组件 --><!-- <keep-alive :include="['News','Message']"><router-view></router-view></keep-alive> --><!-- 缓存一个路由组件 --><keep-alive include="News"><router-view></router-view></keep-alive>
    

11.两个新的生命周期钩子

  1. 作用:路由组件所独有的两个钩子,用于捕获路由组件的激活状态。

  2. 具体名字:

    1. activated路由组件被激活时触发。
    2. deactivated路由组件失活时触发。
  3. 当你使用了缓存路由组件之后,但是你却想将你定义的定时器等功能给销毁时,即可使用activateddeactivated

    activated(){console.log('News组件激活了');this.times = setInterval(() => {console.log('@');this.opacity -= 0.01if(this.opacity <= 0) this.opacity = 1}, 16)},
    deactivated(){console.log('News组件失活了');clearInterval(this.times)
    }
    

12.路由守卫

  1. 作用:对路由进行权限控制

  2. 分类:全局守卫、独享守卫、组件内守卫

  3. 全局守卫:

    //全局前置守卫:初始化时执行、每次路由切换前执行
    const router = new VueRouter({......})
    router.beforeEach((to,from,next)=>{console.log('beforeEach',to,from)if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制if(localStorage.getItem('school') === 'atguigu'){ //权限控制的具体规则next() //放行}else{alert('暂无权限查看')// next({name:'guanyu'})}}else{next() //放行}
    })//全局后置守卫:初始化时执行、每次路由切换后执行
    router.afterEach((to,from)=>{console.log('afterEach',to,from)if(to.meta.title){ document.title = to.meta.title //修改网页的title}else{document.title = 'vue_test'}
    })
    export default router
    
  4. 独享守卫:

    const router = new VueRouter({mode:'hash',// mode:'history',routes:[{name:'xinwen',path:'news',component:News,meta:{isAuth:true,title:'新闻'},beforeEnter:((to,from,next)=>{console.log('独享路由守卫',to,from  );if(to.meta.isAuth) { //判断是否需要权限if(localStorage.getItem('school') === '张三学院') {next() //放行}else {alert('学校名不对,无权查看!')}}else {next()}})},]
    })
    
  5. 组件内守卫(在所需守卫的组件添加即可):

      <script>export default {name:'About',//  通过路由规则,进入该组件时被调用beforeRouteEnter (to, from, next) {console.log('About--beforeRouteEnter',to,from);if(to.meta.isAuth) { //判断是否需要权限if(localStorage.getItem('school') === '张三学院') {next() //放行}else {alert('学校名不对,无权查看!')}}else {next()}},//  通过路由规则,离开该组件时被调用beforeRouteLeave (to, from, next) {console.log('About--beforeRouteLeave',to,from);next()}}</script>
    

13.路由器的两种工作模式

  1. 对于一个url来说,什么是hash值?—— #及其后面的内容就是hash值。

  2. hash值不会包含在 HTTP 请求中,即:hash值不会带给服务器。

  3. hash模式:

    1. 地址中永远带着#号,不美观 。
    2. 若以后将地址通过第三方手机app分享,若app校验严格,则地址会被标记为不合法。
    3. 兼容性较好。
  4. history模式:

    1. 地址干净,美观 。
    2. 兼容性和hash模式相比略差。
    3. 应用部署上线时需要后端人员支持,解决刷新页面服务端404的问题。
  5. 在路由里设置即可

    const router = new VueRouter({mode:'hash',// mode:'history',......
    })
    

ElementUI组件库

ElementUI地址:https://element.eleme.cn/#/zh-CN/component/installation

按需引入

  1. main.js文件中
    // 引入Vue
    import Vue from 'vue'
    // 引入所有组件的父组件App
    import App from './App'
    // 按需引入(使用那个引入那个)
    import { Button, Row, DatePicker } from 'element-ui';
    // 关闭生产提示
    Vue.config.productionTip = false
    //应用ElementUI
    Vue.component(Button.name, Button);
    Vue.component('el-row', Row);
    Vue.component('el-date-picker', DatePicker);
    // 创建vm
    new Vue({// el:'#app',render: h => h(App),
    }).$mount('#app')	
    
  2. babel.config.js
    module.exports = {presets: ['@vue/cli-plugin-babel/preset',["@babel/preset-env", { "modules": false }]],"plugins": [["component",{"libraryName": "element-ui","styleLibraryName": "theme-chalk"}]]
    }
    
  3. 之后即可在组件中使用按需引入的组件即可
    <template><div><button>原生的按钮</button><input type="text"><el-row><el-button>默认按钮</el-button><el-button type="primary">主要按钮</el-button><el-button type="success">成功按钮</el-button><el-button type="info">信息按钮</el-button><el-button type="warning">警告按钮</el-button><el-button type="danger">危险按钮</el-button></el-row><el-date-pickertype="date"placeholder="选择日期"></el-date-picker><el-row><el-button icon="el-icon-search" circle></el-button><el-button type="primary" icon="el-icon-s-check" circle></el-button><el-button type="success" icon="el-icon-check" circle></el-button><el-button type="info" icon="el-icon-message" circle></el-button><el-button type="warning" icon="el-icon-star-off" circle></el-button><el-button type="danger" icon="el-icon-delete" circle></el-button></el-row></div>
    </template>
    

按需引入报错

  1. 如果根据ElementUI组件库的快速上手一步一步引入,将会报以下错误
    在这里插入图片描述
  2. babel.config.js中将["es2015", { "modules": false }]修改为["@babel/preset-env", { "modules": false }]

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/646438.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

李沐《动手学深度学习》深度学习计算

系列文章 李沐《动手学深度学习》预备知识 张量操作及数据处理 李沐《动手学深度学习》预备知识 线性代数及微积分 李沐《动手学深度学习》线性神经网络 线性回归 李沐《动手学深度学习》线性神经网络 softmax回归 李沐《动手学深度学习》多层感知机 模型概念和代码实现 李沐《…

使用 LinkAi 打造自己的知识库和数字人

其他系列文章导航 Java基础合集数据结构与算法合集 设计模式合集 多线程合集 分布式合集 ES合集 文章目录 其他系列文章导航 文章目录 前言 一、LinkAi 介绍 二、文档库 2.1 创建知识库 2.2 配置知识库 2.3 Ai配置 2.4 导入文档 2.5 接入微信 三、扩展 四、总结…

结合CSS一些样式属性和属性值进行案例演示

案例演示 图1 1.结构分析 文字部分用<p>标签定义&#xff0c;对于特殊显示的文本&#xff08;如导语、详情&#xff09;等可以用<em>、<strong>等格式化标签来定义&#xff0c;效果图如图2。 图2 2.样式分析 &#xff08;1&#xff09;控制段落文本的字体…

一种改进的小龙虾优化算法大|Crayfish optimization algorithm(COA)|首次公开—原创代码

1、简介 本文介绍一种新的全局优化算法——小龙虾优化算法Crayfish optimization algorithm&#xff08;COA&#xff09;&#xff0c;模拟了小龙虾的避暑行为、竞争行为和觅食行为。该成果于2023年9月最新发表在Artifcial Intelligence Review。 COA的灵感来自小龙虾的避暑、…

springboot农机电招平台源码和论文

随着农机电招行业的不断发展&#xff0c;农机电招在现实生活中的使用和普及&#xff0c;农机电招行业成为近年内出现的一个新行业&#xff0c;并且能够成为大群众广为认可和接受的行为和选择。设计农机电招平台的目的就是借助计算机让复杂的销售操作变简单&#xff0c;变高效。…

异常检测(Anomaly Detection)

1.问题的动机 什么是异常检测呢&#xff1f;为了解释这个概念&#xff0c;让我举一个例子吧&#xff1a; 假想你是一个飞机引擎制造商&#xff0c;当你生产的飞机引擎从生产线上流出时&#xff0c;你需要进行QA(质量控制测试)&#xff0c;而作为这个测试的一部分&#xff0c;你…

CSS自适应分辨率 postcss-pxtorem(适用于 Vite)

前言 此篇是基于 Vite Vu3 项目的 CSS 自适应分辨率&#xff01; 如果想知道基于 Webpack Vue2 可移步 《CSS自适应分辨率 amfe-flexible 和 postcss-pxtorem&#xff08;适用于 Webpack&#xff09;》 项目对应的主要插件版本如下&#xff1a; "vite": "^4…

纳斯达克VS路透社MIFI大屏直投-大舍传媒

纳斯达克VS路透社MIFI大屏直投-大舍传媒 引言 在数字时代的今天&#xff0c;大屏投放成为一种广泛应用的营销手段和传媒方式。纳斯达克大屏和路透社MIFI大屏作为两个重要的投放平台&#xff0c;为企业和机构提供了广告和宣传的机会。 纳斯达克大屏的魅力 纳斯达克大屏位于纽…

Wpf 使用 Prism 实战开发Day14

备忘录接口增删&#xff08;CURD&#xff09;改查实现 一.添加备忘录控制器&#xff08;MemoController&#xff09; 备忘录控制器&#xff08;MemoController&#xff09;和待办事项控制器 &#xff08;ToDoController&#xff09;功能实现差不多一样。基本套路就是&#xff1…

写点东西《JavaScript 中的递归》

写点东西《JavaScript 中的递归》 您是否曾经发现自己需要在 JavaScript 中循环遍历一个复杂的多维对象&#xff0c;却不知道如何操作&#xff1f; 那么&#xff0c;递归函数到底是什么&#xff1f; 让我们回到我们的树对象。 为什么使用递归&#x1f31f;更多精彩 您是否曾经发…

LabVIEW工业机器人系统

介绍了ABB工业机器人与LabVIEW之间进行数据交互的解决方案。通过使用TCP/IP协议的socket通信&#xff0c;实现了机器人坐标数据的读取&#xff0c;为人机交互提供了一个更便捷、更高效的新思路。 系统主要由ABB工业机器人、基于TCP/IP协议的通信接口和LabVIEW软件组成。工业机…

鸿蒙常用UI效果及一些处理方式总结

前言&#xff1a; DevEco Studio版本&#xff1a;4.0.0.600 详细使用介绍 1、Text的一些常用设置 Text(this.message).fontSize(50)//字体大小.fontColor(Color.White)//字体颜色.fontWeight(FontWeight.Bold)//字体加粗.backgroundColor(Color.Black)//背景颜色.fontStyle(…

[安全警报] Npm木马利用“Oscompatible“包悄然安装AnyDesk

最近&#xff0c;一个名为OsCompatible的恶意包被上传到npm 。该包被发现包含一个针对 Windows 的远程访问木马。 这个名为OsCompatible的软件包于2024年1月9日发布&#xff0c;在被撤下之前共吸引了380次下载。 据了解&#xff0c;OsCompatible包含“几个奇怪的二进制文件”…

Linux本地部署MeterSphere测试平台并实现公网远程访问

文章目录 前言1. 安装MeterSphere2. 本地访问MeterSphere3. 安装 cpolar内网穿透软件4. 配置MeterSphere公网访问地址5. 公网远程访问MeterSphere6. 固定MeterSphere公网地址 前言 MeterSphere 是一站式开源持续测试平台, 涵盖测试跟踪、接口测试、UI 测试和性能测试等功能&am…

重学JavaScript高级(十五): XHR以及Fetch的理解应用

JavaScript XHR、Fetch 服务器端渲染-前后端分离 **服务器端渲染&#xff1a;**将html文件在后端&#xff0c;拼接好&#xff0c;将整个文件全部返回给前端 随着目前业务逻辑的复杂度提升&#xff0c;这种开发模式&#xff0c;会导致效率低下同时&#xff0c;有时候前端页面仅…

SQL语句 - 查询语句

Data Query Language 文章目录 Data Query Language数据查询&#xff08;DQL&#xff09;基础查询1 基本查询2 排序查询3 条件查询4 分支结构查询5 查询函数6 分组查询7 分组过滤查询8 限定查询9 基础查询总结 面试题&#xff1a;一条SQL查询语句的执行流程高级查询1 子查询2 合…

linux基础学习(7):find命令

1.按照文件名搜索 find 搜索路径 选项 文件名 选项&#xff1a; -name&#xff1a;按文件名搜索 -ineme&#xff1a;不区分文件名大小写搜索 -inum&#xff1a;按inode号搜索 按文件名搜索跟按关键词搜索不一样&#xff0c;只能搜到文件名完整对应的文件 *根据文件名…

电磁波的空间辐射的几种传输形式

一般来说&#xff0c;波的传播方式与波长有关&#xff0c;如低频段的地波传播&#xff0c;极低频段的地—电离层波导传播&#xff0c;短波段的天波传播&#xff0c;甚高频&#xff0c;超高频的直线传播和散射传播方式等。绕射和透射是电磁波传输特性与环境的关系&#xff0c;属…

利用 Token Explorer 信号驾驭市场波动

市场波动使加密货币投资组合面临风险&#xff0c;但是通过 Token Explorer 分析&#xff0c;我们可以对波动进行建模&#xff0c;提前预测市场风险&#xff0c;并找到最安全的投资策略。通过综合考虑 Token 价格、交易量、社交媒体信息和链上交易等各种数据&#xff0c;我们可以…

【转载】linux摄像头驱动

Linux摄像头驱动学习第一篇&#xff0c;对虚拟视频驱动Virtual Video Driver(vivid)进行测试、分析、编写。 V4L2(Video for Linux two)是Linux内核中关于视频设备的内核驱动框架&#xff0c;为上层的访问底层的视频设备提供了统一的接口。 V4L2可以支持多种设备,它可以有以下…