完成Vue Router 安装后,就可以使用路由了,路由的基本使用步骤,首先定义路由组件,以便使用Vue Router控制路由组件展示与 切换,接着定义路由链接和路由视图,以便告知路由组件渲染到哪个位置,然后再项目中创建路由模块,最后导入并挂载路由模块。
接下来通过实际操作方式演示Vue Router使用方法。
1.定义路由组件
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>
定义路由链接和路由视图
在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>
上述代码:第4行通过to属性定义Home组件链接地址为“/Home”,与路由匹配规则中path属性值“home”对应,第7行代码使用标签渲染当前路由对应组件,19-22行代码用于激活路由链接设置高亮样式。