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

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

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

3.项目目录：

components存放自己定义的组件，

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

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

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

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

 4.1创建header.vue文件

 4.2 在app.vue中导入该组件

template>
  

         
    
   
  

 

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

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

注意：文字该标签代表点击'文字‘显示指定路径的组件

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

步骤：

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

在home.vue中定义

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

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中使用路由

4，启动项目：

点击‘home组件’，

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

6.注意点：

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

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

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

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