当前位置：首页 > news >正文

【路由組件】

news 2025/8/4 20:05:58

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

在src \components 目录下创建2个组件，分别为Home
组件和About组件，用于演示组件切换效果，文件名为Home.vue和About.vue

Home.vue文件代码如下：

<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文件代码如下：

<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组件路由链接，具体代码如下。

<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>