vue+elementUI后台系统（第三章：路由的引入与首页创建）

目录

前言

一、新建首页页面

1.新建首页

二、引入路由

1.引入vue-router

2.全局引入router

3.运行页面

总结

---

前言

随着框架的流行，越来越多的开发者喜欢用框架开发项目，以vue、react等居主流，国内比较常用的就是vue进行项目的搭建，本系列文章主要使用vue+webpack进行项目的搭建，其中使用了elementUI进行了扩展，增加到后台系统的布局和路由相关知识，有兴趣就往下看吧~

---

一、新建首页页面

前面两章已经搭建好项目并引入了elementUI框架了，那么现在我们来新建一个首页试试吧~

1.新建首页

我们先在views下面新建home文件夹，再新建index.vue，这里我们页面输入以下代码：

代码如下：

<template>
  <div>
    <p>{{message}}</p>
  </div>
</template>

<script>
export default {
  name: 'home',
  components: {},
  data() {
    return {
      message: '这里是首页'
    }
  }
  // mounted() {},
  // methods: {}
}
</script>

<style>
</style>

二、引入路由

1.引入vue-router

在src文件夹下新建router，再新建index.js，复制进以下代码：

代码如下（示例）：

import Vue from 'vue'
import Router from 'vue-router' 
// import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/home',
      name: 'name',
      component: () => import('@/views/home'),
    }
   ]
})

解释：

1. path：指定的路径
2. name：指定页面的名称（可不写）
3. component：指定的页面，这里的指定页面为views文件夹下的home文件夹下面的index.vue(如果只有一个且名为index.vue，指定时后面的可以省略)

2.全局引入router

此时，我们还需要将router引入至main.js，输入以下代码，如下图：

3.运行页面

此时已经完毕了，我们执行：npm run dev

此时可能会发生以下报错，如下图所示：

原因：代码格式化插件和ESLint的规则冲突。

解决方法：找到eslintrc.js文件，在rules中输入以下代码：

'space-before-function-paren': ["error", "never"]

修改后如下图：

 此时再执行：npm run dev ，然后在浏览器中输入返回的地址（我的地址如下图：），

可以看到页面如下，则表示成功啦~：

如果过程中报以下错误，不要慌张，只需要在页面style标签后面新添加一行就可以了

---

总结

以上就是今天要讲的内容，本文讲解了路由的引入及使用

上一章：vue+elementUI后台系统（第二章：elementUI引入与使用）

下一章：vue+elementUI后台系统（第四章：登录页面及Scss/Sass）