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', //此处一定不要写：/news
				component:News
			},
			{
				path:'message',//此处一定不要写：/message
				component: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. 浏览器的历史记录有两种写入方式：分别为push和replace，push是追加历史记录，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. 当你使用了缓存路由组件之后，但是你却想将你定义的定时器等功能给销毁时，即可使用activated与deactivated

    activated(){
     console.log('News组件激活了');
     this.times = setInterval(() => {
        console.log('@');
        this.opacity -= 0.01
        if(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-picker
      type="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.mfbz.cn/a/350284.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

水滴邮件营销：让企业营销更简单、更高效

水滴邮件营销：让企业营销更简单、更高效

企业在利用邮件开发客户、推广产品的时候&#xff0c;最终目的是想产生转化&#xff0c;获得收益。邮件营销有他得天独厚的优势&#xff0c;它为买卖双方提供了一个交流平台&#xff0c;并且只要收件人同意&#xff0c;企业就可以长期对其进行个性化营销。这为企业积累长期忠实…
阅读更多...
vue实现在线Excel表格功能

vue实现在线Excel表格功能

目录 1.安装x-data-spreadsheet xlsx 2.引入 3.使用 1.安装x-data-spreadsheet xlsx npm i x-data-spreadsheet xlsx2.引入 import zhCN from "x-data-spreadsheet/src/locale/zh-cn"; import Spreadsheet from "x-data-spreadsheet"; import * as X…
阅读更多...
CSS之webkit内核中的属性text-stroke

CSS之webkit内核中的属性text-stroke

让我为大家介绍一下text-stroke 大家是否想过要弄一个描边过的文字&#xff0c;接下来&#xff0c;text-stroke就可以为你解决 text-stroke是一个复合属性&#xff0c;里面有两个参数&#xff1a;描边的尺寸 描边的颜色 <!DOCTYPE html> <html lang"en">…
阅读更多...
【PCL】（六）点云矩阵变换

【PCL】（六）点云矩阵变换

【PCL】&#xff08;六&#xff09;点云矩阵变换 以下代码实现使用Eigen库定义的4x4矩阵对从PCD或PLY文件加载的点云进行旋转和平移变换&#xff0c;并显示原始和变换后的点云。 matrix_transform.cpp&#xff1a; #include <iostream> #include <pcl/io/pcd_io.h&…
阅读更多...
Java 字符串 05 练习-遍历字符串和统计字符个数

Java 字符串 05 练习-遍历字符串和统计字符个数

代码&#xff1a; import java.util.Scanner; public class practice{public static void main(String[] args) {//键盘录入一个字符串&#xff0c;并进行遍历&#xff1b;Scanner input new Scanner(System.in);System.out.println("输入一个字符串&#xff1a;")…
阅读更多...
springboot347基于web的铁路订票管理系统

springboot347基于web的铁路订票管理系统

获取源码——》公主号&#xff1a;计算机专业毕设大全
阅读更多...
Linux：用户切换指令su

Linux：用户切换指令su

相关文章 Linux专栏https://blog.csdn.net/weixin_45791458/category_12234591.html su是一个常用的用户切换命令&#xff0c; 用于在不同的用户身份之间切换&#xff0c;下面是它的用法。 用法&#xff1a; su [-] [-lmpVh] [-s shell] [-c command] [-w list] [username] 选…
阅读更多...
快来pick你喜欢的布袋式压风自救装置

快来pick你喜欢的布袋式压风自救装置

拼搏奋斗&#xff0c;追逐梦想&#xff0c;让我们一起努力&#xff0c;成为更好的自己。在人生的道路上&#xff0c;我们会遇到各种挫折和困难。但只要我们积极面对&#xff0c;勇敢前进&#xff0c;一切皆有可能。让我们一起用正能量的心态去迎接每一个新的挑战&#xff01;无…
阅读更多...
HarmonyOS 鸿蒙应用开发( 六、实现自定义弹窗CustomDialog）

HarmonyOS 鸿蒙应用开发( 六、实现自定义弹窗CustomDialog）

自定义弹窗&#xff08;CustomDialog&#xff09;可用于广告、中奖、警告、软件更新等与用户交互响应操作。开发者可以通过CustomDialogController类显示自定义弹窗。具体用法请参考自定义弹窗。 在应用的使用和开发中&#xff0c;弹窗是一个很常见的场景&#xff0c;自定义弹窗…
阅读更多...
封装qms三级物料多选组件

封装qms三级物料多选组件

qms项目中的物料数据有很多&#xff0c;若是直接通过select下拉展示&#xff0c;首先是数据太多&#xff0c;会卡住&#xff0c;然后展示的内容也不全&#xff0c;目前物料有三个层级&#xff0c;分别一级物料、二级物料、三级物料&#xff0c;若是多加几个筛选条件&#xff0c…
阅读更多...
Mysql 学习（十 四）事务简介

Mysql 学习（十 四）事务简介

为什么要有事务&#xff1f; 数据库的出现其实是有应用场景的&#xff0c;最好的例子就是交易&#xff0c;以前的交易是通过账本记录的&#xff0c;也就是通过纸和笔来记录&#xff0c;而数据库的出现大大提升了效率&#xff0c;但是现实中的有些问题&#xff0c;数据库也需要…
阅读更多...
基于Grafana+Prometheus搭建可视化监控系统实践

基于Grafana+Prometheus搭建可视化监控系统实践

基本介绍 Grafana&#xff1a;一个监控仪表系统&#xff0c;可以根据提供的监控数据&#xff0c;生产可视化仪表盘&#xff0c;同时也具有告警通知功能。这里的监控数据来源&#xff0c;目前主要以Prometheus为主&#xff08;也支持其它数据源&#xff09;&#xff0c;每次展现…
阅读更多...
1.26 day3 C++

1.26 day3 C++

设计一个Per类&#xff0c;类中包含私有成员:姓名、年龄、指针成员身高、体重&#xff0c;再设计一个Stu类&#xff0c;类中包含私有成员:成绩、Per类对象p1&#xff0c;设计这两个类的构造函数、析构函数和拷贝构造函数。 #include <iostream>using namespace std; cla…
阅读更多...
CS奇技淫巧之1.1.1.1上线

CS奇技淫巧之1.1.1.1上线

编者注&#xff1a;本文仅供学习研究&#xff0c;严禁从事非法活动。 前期准备 一个干净的域名 一台VPS 一个CloudFlare账号 CloudFlare配置 Cloudflare 是一家国外的 CDN 加速服务商&#xff0c;提供免费和付费的加速和网站保护服务&#xff0c;百度云加速的国外节点就是和 …
阅读更多...
力扣面试题 16.06. 最小差

力扣面试题 16.06. 最小差

Problem: 面试题 16.06. 最小差 文章目录 题目描述思路即解法复杂度Code 题目描述 思路即解法 注意本题目的数据范围!!! 1.对数组a与数组b进行排序;获取a与b的数组长度aLen,bLen&#xff0c;定义一个long类型的变量min&#xff1b; 2.分别让两个指针i&#xff0c;j指向数组的开…
阅读更多...
ROS 计算图级 小结

ROS 计算图级 小结

ROS 会创建一个连接到所有进程的网络。在系统中的任何节点都可以访问此网络&#xff0c;并通过该网络与其他节点交互&#xff0c;获取其他节点发布的信息&#xff0c;并将自身数据发布到网络上。 在这一层级中最基本的概念包括节点、节点管理器、参数服务器、消息、服务、主题和…
阅读更多...
鸿蒙开发会是前端程序员的下一个春天吗？

鸿蒙开发会是前端程序员的下一个春天吗？

前言 最近前端的大环境不太行&#xff0c;之前身处在前端的自己薪资也越来越无望了&#xff0c;隐隐约约感觉前端做不下去了&#xff0c;2024前端找不到工作要转行吗&#xff1f; 看新闻的过程中&#xff0c;**发现越来越多的巨头公司融入鸿蒙生态建设&#xff0c;鸿蒙“朋友…
阅读更多...
Flink Checkpoint 超时问题和解决办法

Flink Checkpoint 超时问题和解决办法

第一种、计算量大&#xff0c;CPU密集性&#xff0c;导致TM内线程一直在processElement&#xff0c;而没有时间做CP【过滤掉部分数据&#xff1b;增大并行度】 代表性作业为算法指标-用户偏好的计算&#xff0c;需要对用户在商城的曝光、点击、订单、出价、上下滑等所有事件进…
阅读更多...
Soul App深化社交元宇宙生态治理，与用户共建清朗网络家园

Soul App深化社交元宇宙生态治理，与用户共建清朗网络家园

近日,新型开放式社交平台Soul App发布了《2023年第二季度Soul生态安全报告》,展现了其在深化社交元宇宙生态治理方面的创新成果。报告显示,第二季度,Soul围绕反诈、引导社交礼仪规范、未成年保护、用户共治众裁、防治网暴骚扰等方面开展用户安全生态专项治理,通过一系列创新举措…
阅读更多...
MATLAB字符串编辑常用代码

MATLAB字符串编辑常用代码

1.字符串赋值 % 字符串赋值 sabcdefg 2.字符串属性和操作 (1)获取字符串长度 sabcdefg;% 字符串赋值 length(a) % 获取字符串长度 (2)连接字符串 % 连接两个字符串,每个字符串最右边的空格被裁切 s1a s2b s3strcat(s1,s2) 3.字符串比较 % strcmp 比较两个字符串是…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站