8.****VUE创建组件（页面）、并映射到对应的路由

在router/index.js文件中：

//1.引入组件

2.//2.定义路由，将路由与组件进行映射

 3. 创建 router 实例，然后传 `routes` 配置

 

index.js代码如下：

import Vue from 'vue'
import Router from 'vue-router'

//1.引入组件
import HelloWorld from '@/components/HelloWorld'

import user from '../views/user.vue'
import user from '../views/home.vue'
Vue.use(Router)

//2.定义路由，将路由与组件进行映射

const routes = [
  {
    path: '/',
    name: 'HelloWorld',
    component: HelloWorld
  },
  {
    path: '/user',
    name:user,
    component: user,
  },
  {
    path: '/home',
    name:home,
    component: home,
  },
]
// 3. 创建 router 实例，然后传 `routes` 配置
const router = new Router({
  routes // (缩写) 相当于 routes: routes
})


export default router

其中:

home.vue文件如下：

<template>
  <h1>我是hone</h1>
</template>

<script>
  export default {
    data() {
      return {}
    }
  }
</script>

<style>
</style>

 4.在main.js中挂载路由router

main.js代码如下：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
//import { Row,Button} from 'element-ui'; 局部引入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.config.productionTip = false
//全局引入
Vue.use(ElementUI);

/* eslint-disable no-new */

//4.将router挂载到根节点
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

 截至现在，其他文件不需要改任何代码：

5.实现网页的跳转，匹配路由（路由出口）

修改VUE文件，添加路由出口