Vue 04 day（路由）

最新推荐文章于 2024-02-08 10:28:07 发布
最新推荐文章于 2024-02-08 10:28:07 发布
阅读量101 收藏
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50430856/article/details/109239770
版权

Vue

使用refs获取DOM和组件

//refs获取 Dom节点
<div id="app">
			<h3 ref="myh3">哈哈哈哈啊，今天的天气正好</h3>
			<button type="button" @click="getelement">获取元素</button>
		</div>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			new Vue({
				el: "#app",
			   methods:{
				   getelement:function(){
					   console.log(this.$refs.myh3.innerHTML)
				   }
			   }
			})
		</script>

//获取组件
<div id="app">
			<login ref="mylogin"></login>
			<button type="button" @click="getelement">获取组件</button>
		</div>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var login={
				template:`<h1>这是组件</h1>`,
				data(){
					return{
						msg:"son msg"
					}
				},
				methods:{
				show(){
					console.log("调用了组件的方法")
				}
				}
			}
			  var app= new Vue({
				el: "#app",
			   methods:{
				   getelement:function(){
					   console.log(this.$refs.mylogin.msg)
					   this.$refs.mylogin.show()
				   }
			   },
			   components:{
				   login
			   }
			})
		</script>

vue-router 路由

什么是路由
mvc框架就是通过URL地址来对应到不同的路由，这就是我们所指的后端路由。
1.后端路由
对于普通的网站，所有的超链接都是URL地址都对应服务器上对应的资源。
2.前端路由
主要通过URL中的hash（#号）来实现不同页面之间的切换，
特点：HTTP请求中不会包含hash相关的内容，所以，单页面程序中的页面跳转主要使用hash实现。
URL的改变不会发送新的请求，他只是在一个页面中跳来跳去，这种通过hash改变 来切换页面的方式，称作前端路由

	<div id="app">
		<!-- 因为是hash路由所以要加# -->
		<a href="#/com1">这是一</a>
		<a href="#/com2">这是2</a>
		<!-- 这是vue-router提供的元素，专门用来 当作占位符的，将来，路由规则匹配到 的组件，就会展示到这个router-view中去-->
		<!-- 所以我们可以把router-view认为是一个占位符 -->
		<router-view ></router-view>
	</div>
	<script src="./js/vue.js"></script>
	<!-- 1.安装vue-router路由模块 -->
	<script src="./js/vue-router.js"></script>
	<script>
		//组件的模板对象
		var com1={
			template:`<div>这是组件一</div>`
		}
		var com2={
			template:`<div>这是组件 二</div>`
		}
		//2.创建一个路由对象，当导入vue-router包之后，在window全局对象中，就有了一个路由的构造函数叫做VueRouter
		//在new路由对象的时候可以为构造函数，传递配置一个对象
		var routerObj= new VueRouter({
			//route //这个配置对象中的route表示【路由匹配规则】的意思
			routes:[//路由匹配规则
			//每个 路由规则都是一个对象，这个规则的对象，身上有两个必须的属性：
			//属性1 是path 表示监听那个路由连接地址
			//属性2 是component 表示，如果卤藕是前面匹配到的path，z则展示component属性对应的那个组件
			//注意：component的属性值，必须是一个组件的模板对象，不能是组件的引用名称
			{path:'/com1',component: com1},
			{path:'/com2',component: com2}
			]
		})
		
		var app=new Vue({
			el:"#app",
			data:{},
			methods:{},
			router: routerObj//将路由规则对象注册到app实例上，用来监听url地址 的 变化，然后展示对应的组件
		})
	</script>

router-link和redirect（重定向）的基本使用

<div id="app">
		<!-- router-link默认渲染为一个a标签 -->
		<router-link to="/com1">这是组件一</router-link>
		<router-link to="/com2">这是组件二</router-link>
		<!-- 这是vue-router提供的元素，专门用来 当作占位符的，将来，路由规则匹配到 的组件，就会展示到这个router-view中去-->
		<!-- 所以我们可以把router-view认为是一个占位符 -->
		<router-view ></router-view>
	</div>
	<script src="./js/vue.js"></script>
	<!-- 1.安装vue-router路由模块 -->
	<script src="./js/vue-router.js"></script>
	<script>
		//组件的模板对象
		var com1={
			template:`<div>这是组件一</div>`
		}
		var com2={
			template:`<div>这是组件 二</div>`
		}
		//2.创建一个路由对象，当导入vue-router包之后，在window全局对象中，就有了一个路由的构造函数叫做VueRouter
		//在new路由对象的时候可以为构造函数，传递配置一个对象
		var routerObj= new VueRouter({
			//route //这个配置对象中的route表示【路由匹配规则】的意思
			routes:[//路由匹配规则
			//每个 路由规则都是一个对象，这个规则的对象，身上有两个必须的属性：
			//属性1 是path 表示监听那个路由连接地址
			//属性2 是component 表示，如果卤藕是前面匹配到的path，z则展示component属性对应的那个组件
			//注意：component的属性值，必须是一个组件的模板对象，不能是组件的引用名称
			{path:'/',redirect: "/com1"},
			{path:'/com1',component: com1},
			{path:'/com2',component: com2}
			]
		})
		
		var app=new Vue({
			el:"#app",
			data:{},
			methods:{},
			router: routerObj//将路由规则对象注册到app实例上，用来监听url地址 的 变化，然后展示对应的组件
		})
	</script>

设置路由链接的样式（linkActiveClass）

<style>
		/* 这是默认的link连接的类名  */
	.router-link-active{
		color: red;
	}
	</style>
</head>
<body>
	<div id="app">
		<!-- router-link默认渲染为一个a标签 -->
		<router-link to="/com1">这是组件一</router-link>
		<router-link to="/com2">这是组件二</router-link>
		<!-- 这是vue-router提供的元素，专门用来 当作占位符的，将来，路由规则匹配到 的组件，就会展示到这个router-view中去-->
		<!-- 所以我们可以把router-view认为是一个占位符 -->
		<router-view ></router-view>
	</div>
	<script src="./js/vue.js"></script>
	<!-- 1.安装vue-router路由模块 -->
	<script src="./js/vue-router.js"></script>
	<script>
		//组件的模板对象
		var com1={
			template:`<div>这是组件一</div>`
		}
		var com2={
			template:`<div>这是组件 二</div>`
		}
		//2.创建一个路由对象，当导入vue-router包之后，在window全局对象中，就有了一个路由的构造函数叫做VueRouter
		//在new路由对象的时候可以为构造函数，传递配置一个对象
		var routerObj= new VueRouter({
			//route //这个配置对象中的route表示【路由匹配规则】的意思
			routes:[//路由匹配规则

			//每个 路由规则都是一个对象，这个规则的对象，身上有两个必须的属性：
			//属性1 是path 表示监听那个路由连接地址
			//属性2 是component 表示，如果卤藕是前面匹配到的path，z则展示component属性对应的那个组件
			//注意：component的属性值，必须是一个组件的模板对象，不能是组件的引用名称
			{path:'/',redirect: "/com1"},
			{path:'/com1',component: com1},
			{path:'/com2',component: com2}
			],
			//这是自己给link式设置类的名字，就可以用这个类名重新写样式
			linkActiveClass:'myclass'
			
		
		})
		
		var app=new Vue({
			el:"#app",
			data:{},
			methods:{},
			router: routerObj//将路由规则对象注册到app实例上，用来监听url地址 的 变化，然后展示对应的组件
		})
	</script>

给路由设置切换动画

<style>
	.v-enter,
	.v-leave-to{
		opacity: 0;
		transform: translateX(140px);
	}
	.v-enter-active,
	.v-leave-active{
		transition: all 0.5s ease;
	}
	</style>


<div id="app">
		
		<router-link to="/com1">这是组件一</router-link>
		<router-link to="/com2">这是组件二</router-link>
		
		<transition name="" mode="out-in">
			<router-view ></router-view>
		</transition>
		
	</div>
	<script src="./js/vue.js"></script>
	<!-- 1.安装vue-router路由模块 -->
	<script src="./js/vue-router.js"></script>
	<script>
		//组件的模板对象
		var com1={
			template:`<div>这是组件一</div>`
		}
		var com2={
			template:`<div>这是组件 二</div>`
		}
		
		var routerObj= new VueRouter({
			//route //这个配置对象中的route表示【路由匹配规则】的意思
			routes:[//路由匹配规则

		
			{path:'/',redirect: "/com1"},
			{path:'/com1',component: com1},
			{path:'/com2',component: com2}
			],
			
			linkActiveClass:'myclass'
			
		
		})
		
		var app=new Vue({
			el:"#app",
			data:{},
			methods:{},
			router: routerObj//将路由规则对象注册到app实例上，用来监听url地址 的 变化，然后展示对应的组件
		})
	</script>

路由传参

在这里插入图片描述

//第一种方法
<div id="app">
		//可以传多个参数
		<router-link to="/com1?id=10&name=ou">这是组件一</router-link>
		<router-link to="/com2">这是组件二</router-link>
		
		<transition name="" mode="out-in">
			<router-view ></router-view>
		</transition>
		
	</div>
	<script src="./js/vue.js"></script>
	<!-- 1.安装vue-router路由模块 -->
	<script src="./js/vue-router.js"></script>
	<script>
		//组件的模板对象
		var com1={
			template:`<div>这是组件一-----{{$route.query.id}}-----{{$route.query.name}}</div>`,
			created() {//这是组件的生命周期函数
		    // console.log(this.$route);
		console.log(this.$route.query.id);
			},
		}
		var com2={
			template:`<div>这是组件 二</div>`
		}
		
		var routerObj= new VueRouter({
			
			routes:[

		
			{path:'/',redirect: "/com1"},
			{path:'/com1',component: com1},
			{path:'/com2',component: com2}
			],
			
			linkActiveClass:'myclass'
			
		
		})
		
		var app=new Vue({
			el:"#app",
			data:{},
			methods:{},
			router: routerObj
		})

//第二种方法
	<div id="app">
		
		<router-link to="/com1/12/ls">这是组件一</router-link>
		<router-link to="/com2">这是组件二</router-link>
		
		<transition name="" mode="out-in">
			<router-view ></router-view>
		</transition>
		
	</div>
	<script src="./js/vue.js"></script>
	<!-- 1.安装vue-router路由模块 -->
	<script src="./js/vue-router.js"></script>
	<script>
		//组件的模板对象
		var com1={
			template:`<div>这是组件一-----{{$route.params.id}}-----{{$route.params.name}}</div>`,
			created() {//这是组件的生命周期函数
		    // console.log(this.$route);
		console.log(this.$route.params.id);
			},
		}
		var com2={
			template:`<div>这是组件 二</div>`
		}
		
		var routerObj= new VueRouter({
			
			routes:[

		
			{path:'/',redirect: "/com1"},
			{path:'/com1/:id/:name',component: com1},
			{path:'/com2',component: com2}
			],
			
			linkActiveClass:'myclass'
			
		
		})
		
		var app=new Vue({
			el:"#app",
			data:{},
			methods:{},
			router: routerObj
		})
	</script>

使用children属性实现组件的嵌套

	<div id="app">
		
		<router-link to="/father">这是父组件的</router-link>
			<router-view ></router-view>
	
		
	</div>
	<template id="tem1">
		<div>
			<h1>这是父组件</h1>
			<router-link to="/father/com1">com1</router-link>
			<router-link to="/father/com2">com2</router-link>
			<router-view ></router-view>
		</div>
	</template>	
	<script src="./js/vue.js"></script>
	<!-- 1.安装vue-router路由模块 -->
	<script src="./js/vue-router.js"></script>
	<script>


		var  father ={
			template:"#tem1"
		}
		//组件的模板对象
		var com1={
			template:`<div>这是组件一</div>`,
		
		}
		var com2={
			template:`<div>这是组件 二</div>`
		}
		
		var routerObj= new VueRouter({
			
			routes:[
			{path:'/father',
			component:father,
			children:[
				{path:'com1',component:com1},
				{path:'com2',component:com2}
			
			]},
			
			
			
			],
		
		})
		
		var app=new Vue({
			el:"#app",
			data:{},
			methods:{},
			router: routerObj
		})
	</script>

命名视图实现经典视图

<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.header{
				background-color: aqua;
			}
			#big{
				display: flex;	
				height: 400px;
			}
			.left{
				background-color: red;
				flex: 2;
			}
			.main{
				background-color: green;
				flex: 8;
			}
		</style>
	</head>
	<body>
		<div id="app">
		<!-- 因为要传方法，所以要使用事件 绑定v-on -->
		<router-view></router-view>
		<div id="big">
		<router-view name="left"></router-view>
		<router-view name="main"></router-view>
		</div>
		
		
	</div>
	
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/vue-router.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		//定义一个字面量类型 的 组件模板对象
		var header={
			template:`<h1 class="header">这是头部</h1>`
			
		}
		var leftBox={
			template:`<h1 class="left">这是侧边栏</h1>`
		}
		var mainBox={
			template:`<h1 class="main">这是主体区</h1>`
		}
		var routerObj=new VueRouter({
			routes:[{
				path:'/',components:{
					'default':header,
					'left':leftBox,
					'main':mainBox
				}
			}]
		})
		var app=new Vue({
			el:"#app",
			data:{},
			methods:{
			
			},
			router: routerObj
			
		})
	</script>
小叶的编程笔记
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue-components.zip
07-15
解压后在vue-components目录下先装一次依赖,然后再进去examples里面装一次依赖,最后在examples文件下下面运行yarn serve(或者npm run serve)
Vue Day7 综合案例
08-11
在Vue.js的学习过程中，Day7通常意味着我们已经掌握了基础组件、事件处理、状态管理等核心概念，现在将这些知识综合运用到一个实际的项目中。在这个"Vue Day7 综合案例"中，我们将深入探讨如何构建一个购物车应用...
Vue2.5学习笔记（二）深入了解组件
Zijeak的博客
09-08 3953
1.组件使用的细节 1.2 子标签内使用组件 假设想在表格便签内使用一个组件作为行，直接使用组件是不行的，原因在于tbody内只能放tr便签，否则浏览器就会将tbody内的标签解析到外面，从而导致结构的错乱。 为了解决这个问题，我们可以使用is特性，将is特性设置为组件名称，这样既保证了tbody和tr之间的层级关系，也使用了组件。 1.2 非根组件的data必须是一个函数 一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝。 1.3 在Vue中操作DOM：使用ref
Vue components(组件)
KingCruel的专栏
09-23 456
1、vue组件的功能 ● 能够把页面抽象成多个相对独立的模块 ● 实现代码重用，提高开发效率和代码质量，使得代码易于维护 2、Vue组件封装过程 ● 首先，使用Vue.extend()创建一个组件 ● 然后，使用Vue.component()方法注册组件 ● 接着，如果子组件需要数据，可以在props中接受定义 ● 最后，子组件修改好数据之后，想把数据传递给父组件，可以使用emit()方法 3...
Vue组件（Component）
最新发布
leva的博客
02-08 6714
在正式介绍组件前，先看一个Vue组件的简单示例感受一下，代码如下：组件是可复用的Vue实例，且带有一个名字，在这个示例中组件名字是button-counter。可以在一个通过new Vue创建的Vue根实例中，把这个组件作为自定义标签来使用，代码如下：Web的组件其实就是页面组成的一部分，好比是计算机中的每一个硬件（如硬盘、键盘、鼠标等），它具有独立的逻辑和功能或界面，同时又能根据规定的接口规则进行相互融合，从而变成一个完整的应用。
vue components组件
weixin_49230250的博客
08-20 3222
组件 组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。组件是可复用的 Vue 实例。 1.局部注册 new Vue({ el... components:{ 组件名称:{ template:"组件的模板内容" } } }) 使用： 在挂载点内以<组件名>这样的方式来使用组件，在挂载点内组件名称的地方，vue解析之后就会把组件的template模板中的内容展示出来。 2.全局注册 局部注册的组件仅能在当前实例的挂载
Vue学习Day9案例
04-30
在`Src`目录下，通常包含着Vue项目的源代码结构，包括`components`（组件）、`router`（路由）、`store`（状态管理）、`views`（视图）等子目录。这些组件共同构成了一个完整的Vue应用。`Src_ajax_user`可能是专门...
day01-VUE进阶
10-29
本课程旨在教授高级软件人才，快速掌握 Vue.js 进阶技术，涵盖了 Vue.js 基础知识的回顾、路由、状态管理、TypeScript 等高级主题。 一、基于脚手架创建前端工程 1. 使用 Vue CLI 创建前端工程，了解 Node.js 和 ...
Day8 智慧商城 Vue2
08-27
在本课程"Day8 智慧商城 Vue2"中，我们将深入探讨如何使用Vue.js框架构建一个功能完善的智慧商城应用。Vue.js是一款轻量级的前端JavaScript框架，以其易用性、灵活性和高效的更新机制受到开发者们的广泛欢迎。在这个...
Vue Day6面经基础src文件
08-10
在Vue Day6的面试准备中，src目录是项目的核心部分，包含着应用的所有源代码。理解src目录的结构和其中的文件是掌握Vue开发的关键。 1. **src 文件夹结构**： - `src` 文件夹通常包含以下主要部分： - `...
vue-component-register:允许组件注册其子组件
05-17
Vue组件寄存器 允许组件注册其子组件。 // List.vue import ListItem from './ListItem.vue' export default { name : 'List' , subComponents : { Item : ListItem } } 背景 看到此问题： 安装 # Yarn yarn add vue-component-register # npm npm i vue-component-register CDN | 可用作window.VueComponentRegister 。 如果Vue可用作全局变量，则VueComponentRegister将自动调用Vue.use() 。 用法 /* main.js */ import Vue from 'vue' import ComponentRegiste
vue-component组件
CAUC_lin的博客
01-27 3417
组件（Component）是自定义封装的功能。在前端开发过程中，经常出现多个网页的功能是重复的，而且很多不同的页面之间，也存在同样的功能。将相同的功能进行抽取,封装为组件,这样，前端人员就可以在组件化开发时，只需要书写一次代码，随处引入即可使用。组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象 为一个组件树。
【Vue】组件（component）
✈ 正在努力 の 寒江（StudiousTiger) ✌ 呐 ✈
07-13 7469
文章目录一、什么是组件二、为什么需要组件三、创建一个组件四、组件的复用五、通过 Prop 向子组件传递数据六、通过插槽分发内容七、动态组件八、注意事项 一、什么是组件 所谓的组件，其实就是我们通过vue自定义的一些标签。在自定义的标签中，其实已经封装好了一些自定义的特定的HTML代码。 你也许会疑问，为什么要特意的将HTML代码封装起来。其实是这样的，我们使用组件一方面可以减少HTML的代码（视觉上是这样的），另一方面可以极大的提高代码的复用。 你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它
VUE-组件（component）
damadashen的博客
05-20 8679
VUE组件介绍
vue的组件 components
Gnaf12345的博客
07-04 832
组成：html +Js+css模板: 二、注册组件 1、注册全局组件 2、注册局部组件 三、父子组件之间的传值1、父组件想子组件传值在子组件中使用props 方法接收父组件的数值 2、子组件想父组件传值子组件发射自定义事件 this.$emit("自定义事件类型"，参数1，参数2) 父组件进行接收 父组件接收...
Vue实战之Vue中组件(component)
热门推荐
9.冄2.7.號的博客
08-01 1万+
es6基本语法及使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue之系列课程</title> </head> <body> <div id="app"> <h1>{{msg}}</h1> <!-- ES6: EcmaScri
Vue全家桶之组件（component）
m0_57002951的博客
03-29 2976
a、全局组件的使用 1）定义组件 2）使用组件 Vue中父组件向子组件传递事件并通过事件子组件传递数据到父组件
Vue中使用components的使用技巧
Funky_oaNiu的博客
11-08 1224
components顾名思义：组件（负数），每个vue页面，都可以作为一个组件，引入到其他页面中，形成父子页面嵌套的形式，一个页面可以被多个页面引用，一个页面也可以引用多个页面，多对多关系。例如要实现A.vue为父，B.vue为子，A中引入B组件，以弹窗的形式展现B组件。这样做的好处就是可复用，减少重复代码的编写。只要参考本示例，便可以实现组件封装和调用。
vue入门（四）组件components
欧唯薇
07-17 3198
一、基本介绍 组件是可复用的Vue实例，可以在一个通过new Vue创建的Vue根实例中，把这个组件作为自定义元素来使用。 组件也可以包含data、computed、watch、methods以及生命周期钩子等，除了el。 1、一个组件的data必须是一个函数 这样，每个实例可以维护自己独立的数据，而不是每个组件都使用同一个数据： data:function(){ ...
vue 路由守卫 路由鉴权
09-17
Vue 路由守卫是一种机制，用于在用户路由切换时对其进行监控和控制。路由鉴权是一种安全机制，用于验证用户是否有权限访问某个特定的路由或页面。 在 Vue 中，我们可以使用路由守卫来实现路由鉴权。路由守卫有三种...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值