组件(Component)是 Vue.js 最强大的功能之一。
组件可以扩展 HTML 元素,封装可重用的代码。
组件系统让我们可以用独立可复用的小组件来构建大型应用。
- 在src目录下新建一个components文件夹,在里面新建一个Navagtion.vue文件,这就是一个导航组件。
代码如下:
<template>
<div>
<ul>
<li v-for="item in menus" :key="item.index>{{item.title}}</li>
</ul>
</div>
</template>
<script>
export default {
//获取组件的属性,声明字段的类型
props: { url: String, title: String, menus: Array },
}
</script>
<style>
</style>
- 在views文件夹下新建一个Home文件夹,里面建一个home.vue文件。
- 我们要将所写的导航组件引入到文件中
代码如下:
<template>
<div id='app'>
//将页面的值传给组件
<v-nav title="-专家平台" :menus="menus" url="/p"></v-nav>
</div>
</template>
<script>
//引入components导航组件
import VNav from "../../components/Navigation.vue"
export default {
components:{
//使用组件
VNav
},
data(){
return {
menus: [
{
title:html,
index:"1"
},
{
title:“javascript”,
index:"2"
},
{
title:"css",
index:"3"
}
]
}
}
</script>
<style>
</style>
- route.js文件代码如下:
//导入Home文件夹下的home
import Home from"../views/Home/home.vue"
let routes = [{
//路由配置
{path:'/home',
component:Home,
name:"主页",
hidden:true}
]
export default routes;
- npm run dev运行
- 浏览器输入 http://127.0.0.1:8010/home