vue自定义组件与路由新手使用

1。百度使用vue-cli创建一个模板项目

2.创建项目之后，目录如下：

3.项目目录：

components存放自己定义的组件，

其中组件是以.vue结尾的文件

4.创建自定义组件，以header.vue为例

组件的格式均为如下格式，有template标签，script标签，style标签，

template标签用来定义该组件在页面上现实的内容，script标签内容是该组件包含的方法，数据等内容，与正常的vue定义相同

<template>
<div>
这是一个组件
</div>
</template>
<script>
export default {

}
</script>
<style>

</style>

4.1创建header.vue文件

4.2 在app.vue中导入该组件

template>
  <div id="app">
     <myheader></myheader>    <!--    3.使用组件 -->
    <img src="./assets/logo.png">
   
  </div>
</template>

<script>
import header from './components/header.vue';//1.局部引入组件
export default {
  name: 'App',
data (){
return{

}
},
  components:{      //2.注册组件
  'myheader':header
  }



}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

4.3使用npm start 命令即可启动项目，即可看到如下所示，子组件定义成功

5.定义路由，以及子路由

注意：<router-link to='/home'>文字</router-link>该标签代表点击'文字‘显示指定路径的组件

<router-view/>是显示路由的一个入口，即上面router-link指向的组件在此处显示

步骤：

1.创建home.vue,home1.vue,home2.vue三个组件，在components文件夹下创建

在home.vue中定义

<template>
<div>
这是home路由
<hr>
<router-link to='/home/home1'>子组件</router-link>
<router-link to='/home/home2'>子组件2</router-link>
<router-view/>
</div>
</template>
<script>
export default {
data(){
return{

}
}
}
</script>
  <style scoped>

</style>

hom1.vue,home2.vue中定义内容随便，以home1.vue为例，这些路由都相当于一个正常的组件

<template>
<div>
这是home路由的子路由
<hr/>

</div>
</template>
<script>
export default {
data(){
return{

}
}
}
</script>
<style>

</style>

2.在route/index.js文件中定义路由

//路由器模块

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import home from '../components/home.vue'
import home1 from '../components/home1.vue'
import home2 from '../components/home2.vue'
// 使用路由
Vue.use(Router)

export default new Router({
// 定义
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
{    //定义路由
path:'/home',
component:home,
children:[//定义home路由的子路由
  {
    path: 'home1',
      component:home1
  },
  {
    path: 'home2',
      component:home2
  }
  ,
  {
    path: '',//默认显示的组件
      component:home2
  }
]
}
  ]
})

3.在app.vue中使用路由

<template>
  <div id="app">
     <myheader></myheader>    <!--    3.使用组件 -->
    <img src="./assets/logo.png">
    <router-link to="/home">home组件 </router-link>  <!--  使用路由 -->
    <router-view/>
  </div>
</template>

<script>
import header from './components/header.vue';//1.局部引入组件
export default {
  name: 'App',
data (){
return{

}
},
  components:{      //2.注册组件
  'myheader':header
  }



}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

4，启动项目：

点击‘home组件’，

成功创件home路由以及两个home路由的子路由。

6.注意点：

在创建组件时要明白一点，在组件

·export default {}中可以定义方法，数据等内容，

·子组件的样式在style标签中定义，但是要写成<style scoped></style>，否则父组件也会使用其中的样式。

·在一个页面中包含多个router-view出口时，需要使用命名的方式区别每个出口的内容，同时（同级）展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar（侧导航）和 main（主内容）两个视图，这个时候命名视图就派上用场了。