4 vue-cli 新建组件

vue-cli 新建组件

1 新建home组件替代HelloWorld组件

    主页组件    <div style="width: 100%;height: 400px;background: aquamarine;">
      数据区域

 

2 根路径设置为home组件（修改index.js路径文件）

import Vue from 'vue'import Router from 'vue-router'import Home from "../components/Home";

Vue.use(Router)

export default new Router({
  routes: [
    {path: '/', name: 'Home', component: Home}
  ]
})

3 新建user组件

• user组件

    用户组件  export default {
  name: "Home"}" _ue_custom_node_="true">

• index.js配置路由

import Vue from 'vue'import Router from 'vue-router'import HelloWorld from '@/components/HelloWorld'import Home from "../components/Home";import User from "../components/User";

Vue.use(Router)

export default new Router({
  routes: [    // 访问根路径时，重定向到home
    {path: '/', redirect:"/home"},
    {path: '/home', name: 'Home', component: Home},
    {path: '/user', name: 'User', component: User},
  ]
})

4 组件中引入footer

• 引入footer
• 注册footer
• 使用footer

--home组件加入footer

-- user组件加入footer

 

 5 总结

组件分类：1 路由组件（在index.js配置路由用到的组件）2 普通组件（在路由组件中调用）