4 vue-cli 新建组件

1 新建home组件替代HelloWorld组件

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

<script>
export default {
  name: "Home",
}
</script>

<style scoped>

</style>

 

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组件

<template>
  <div>
    用户组件
  </div>
</template>

<script>
export default {
  name: "Home"
}
</script>

<style scoped>

</style>

• 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
<template>
  <div>
    主页组件
    <div style="width: 100%;height: 400px;background: aquamarine;">
      数据区域
    </div>
    <div>
      <!--  使用组件  -->
      <Footer></Footer>
    </div>
  </div>
</template>

<script>
import Footer from "./Footer";  // 引入组件
export default {
  name: "Home",
  components: {
    Footer, // 注册组件
  }
}
</script>

<style scoped>

</style>

-- user组件加入footer
<template>
  <div>
    用户组件<br>
    <!--  引入图片  -->
    <img src="../assets/logo.png">
    <div>
      <table border="1" >
        <tr>
          <th>id</th>
          <th>name</th>
          <th>opt</th>
        </tr>
        <tr v-for="user in users">
          <td>{{user.id}}</td>
          <td>{{user.name}}</td>
          <td>
            <a href="">编辑</a>
            <a href="">删除</a>
          </td>
        </tr>
      </table>
    </div>
    <div>
      <!--  使用组件  -->
      <Footer></Footer>
    </div>
  </div>
</template>

<script>
import Footer from "./Footer";
export default {
  name: "Home",
  data() {
    return{
      users:[
        {id:1, name:"张飞"},
        {id:2, name:"关羽"},
      ]
    }
  },
  components: {
    Footer,
  },
  created() { // 发送axios请求
  }
}
</script>

<style scoped>

</style>

 

 5 总结

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

 

6 前端路由hash模式和url模式（index.js中设置mode="history"）

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