目录
前言
随着框架的流行,越来越多的开发者喜欢用框架开发项目,以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'),
}
]
})
解释:
- path:指定的路径
- name:指定页面的名称(可不写)
- 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标签后面新添加一行就可以了
总结
以上就是今天要讲的内容,本文讲解了路由的引入及使用