【路由組件】

完成Vue Router 安装后,就可以使用路由了,路由的基本使用步骤,首先定义路由组件,以便使用Vue Router控制路由组件展示与 切换,接着定义路由链接和路由视图,以便告知路由组件渲染到哪个位置,然后再项目中创建路由模块,最后导入并挂载路由模块。

接下来通过实际操作方式演示Vue Router使用方法。
1.定义路由组件

在src \components 目录下创建2个组件,分别为Home

组件和About组件,用于演示组件切换效果,文件名为Home.vue和About.vue

Home.vue文件代码如下:

csharp 复制代码
<template>
	<div class="home-container">
		<h3>Home组件</h3>
	</div>
</template>
<style scoped>
	.home-container{
		min-height:150px;
		background-color:#f2f2f2;
		padding:15px;
	}
<yle>

About.vue文件代码如下:

csharp 复制代码
<template>
	<div class="home-container">
		<h3>Home组件</h3>
	</div>
</template>	
<style scoped>
	.about-container{
		min-height:150px;
		background-color:#f2f2f2;
		padding:15px;
	}
<yle>

定义路由链接和路由视图

为了在页面中将路由对应的组件显示出来,还要在App组件中定义路由视图。路由视图标签定义,该标签会被渲染成当前路由对应组件,另外,为了方便在不同组件之间切换,可以通过标签定义路由链接,该标签的to属性表示链接地址,与路由匹配规则中的path属性对应。

在src\App.vue文件中定义路由视图以及Home组件和About组件路由链接,具体代码如下。

csharp 复制代码
<template>
	<div class="home-container">
		<h1>App根组件</h1>
		<router-link to="/home">首页</router-link>
		<router-link to="/about">关于</router-link>
		<hr>
		<router-view></router-view>
	</div>
</template>	
	<style scoped>
	.app-container{
		text-align:center;
		font-size:16px;
	}
	.app-container a {
		padding:10px;
		color:#000;
}
	.app-container a.routerr-link-active{
		color:#fff;
		background-color:#000;
}
<yle>

上述代码:第4行通过to属性定义Home组件链接地址为"/Home",与路由匹配规则中path属性值"home"对应,第7行代码使用标签渲染当前路由对应组件,19-22行代码用于激活路由链接设置高亮样式。

相关推荐
dy17171 小时前
element-plus表格默认展开有子的数据
前端·javascript·vue.js
2501_915918414 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
程序员的世界你不懂5 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技5 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip5 小时前
JavaScript二叉树相关概念
前端
一朵梨花压海棠go6 小时前
html+js实现表格本地筛选
开发语言·javascript·html·ecmascript
attitude.x6 小时前
PyTorch 动态图的灵活性与实用技巧
前端·人工智能·深度学习
β添砖java6 小时前
CSS3核心技术
前端·css·css3
空山新雨(大队长)6 小时前
HTML第八课:HTML4和HTML5的区别
前端·html·html5