本文几个知识点：
1、sass
2、sass依赖报错的问题原因分析
3、main.js入口文件的作用
4、render: h => h(App)的含义
5、router以及VUE Router路由守卫
6、router.beforeEach()
在聊main.js这个文件之前，我们先完成一些准备工作。
首先，sass是一个很好的css扩展语言，可以帮助我们减少 CSS 重复的代码，节省开发时间。所以先下载sass。
npm install sass-loader@7.3.1 node-sass@4.14.1 --save-dev
这里标注了sass-loader与node-sass的版本，这里主要是因为经常会出现，明明下载了依赖，但是还是出现这类报错（所以平时安装依赖的时候，切忌无脑安装）
./src/App.vue?vue&type=style&index=0&lang=scss& Syntax Error: TypeError: this.getOptions is not a function
main.js的作用
作为项目的入口文件，所有页面都会加载main.js，所以main.js的作用也是因其这个特点而出现。
1.实例化Vue。
2.放置项目中经常会用到的插件和CSS样式。例如： 网络请求插件:axios和>vue-resource、图片懒加载插件：vue-lazyload
3.存储全局变量。例如（用于的基本信息）
初始创建的main.js文件是这样的
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
其中来解释下面这段代码的含义
new Vue({
render: h => h(App),
}).$mount('#app')
其中render函数是vue通过js渲染dom结构的函数createElement，约定可以简写为h，
扩展开等于：
render: function (createElement) {
return createElement(App);
}
第一步缩写：
render (createElement) {
return createElement(App);
}
进一步缩写：
render (h) {
return h(App);
}
使用箭头函数：
h => h(App);
实际渲染：
import App from './App'
new Vue({
el: '#root',
template: '<App></App>',
components: {
App
}
})
router
之后我们需要加入vue router,在src下创建router/router.js文件。
在详解router.js文件之前，先来了解一下VUE Router
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集> 成，让构建单页面应用变得易如反掌。包含的功能有：
- 嵌套的路由/视图表
- 模块化的、基于组件的路由配置
- 路由参数、查询、通配符
- 基于 Vue.js 过渡系统的视图过渡效果
- 细粒度的导航控制
- 带有自动激活的 CSS class 的链接
- HTML5 历史模式或 hash 模式，在 IE9 中自动降级
- 自定义的滚动条行为
Vue.use(Router)
const vueRouter = new Router({
routes: [{
//首页
path: '/',
redirect: '/index'
},
{
//登陆界面
path:'/login',
name:'login',
component:() => import('../views/login/login.vue')
},
{
path: '/main',
redirect: '/index'
},
{
//父子组件按层级
path: '/main',
component: () => import('../views/main/main.vue'),
name: 'main',
children: [
{
path: '/candlestick',//url路径
name: 'candlestick',//组件名
component: () => import('../views/candlestick/index.vue')//路径
},
]
}]
})
export default vueRouter
这是我写的router.js文件，之后在main.js文件中引入
import router from './router/router'
因为本次vue项目是一个后台管理系统，涉及到有些页面需要登录进去才能查看，所以我们使用router.beforeEach()做一些进入页面的限制。
beforeEach((to, from, next)
to:router即将进入的路由对象
from:当前导航即将离开的路由
next:Function,进行管道中的一个钩子，如果执行完了，则导航的状态就是 confirmed （确认的）；否则为false，终止导航。
动态路由，判断用户是否登录跳转登录页面还是主页面，判断管理员权限，判断页面是否存在，不存在跳转404页面，
router.beforeEach((to, from, next) => {
console.log(to,from)//从登录页->首页 打印信息为(to:index,from:login)
// 不需要登陆就能进入的页面
const nextRoute = ['login', 'register']
if (nextRoute.indexOf(to.name) === -1) {
// 未登录
if (!localStorage.getItem('logined')) {
next({
name: 'login'
})
}else{
next()
}
}
// 已登录的情况再去登录页，跳转至首页
if (to.name === 'login') {
if (localStorage.getItem('logined')) {
next({
name: 'index'
})
}else{
next()
}
}
})
之后引入elementUI
import ElementUI from 'element-ui'
Vue.use(ElementUI)
最后main.js是这样的 引入了后续需要的axios跟echarts以及心跳机制，下期详细讲讲axios跟心跳
最后放下完整的main.js文件
import Vue from 'vue'
import router from './router/router'
import App from './App.vue'
import ElementUI from 'element-ui'
import echarts from 'echarts'
import axios from './config/enviroment/https'
import './config/common/adaptation'
Vue.config.productionTip = false//判断是否是生产模式
Vue.use(ElementUI)
Vue.prototype.$echarts = echarts
Vue.prototype.$axios = axios
router.beforeEach((to, from, next) => {
console.log(to,from)//
// 不需要登陆就能进入的页面
const nextRoute = ['login', 'register']
if (nextRoute.indexOf(to.name) === -1) {
// 未登录
if (!localStorage.getItem('logined')) {
next({
name: 'login'
})
}else{
next()
}
}
// 已登录的情况再去登录页，跳转至首页
if (to.name === 'login') {
if (localStorage.getItem('logined')) {
next({
name: 'index'
})
}else{
next()
}
}
})
axios.get('/heartbeat').then(res=>{
if(res && res.data.code === 401){
localStorage.removeItem('logined')
}
window.showMessage = true
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
})
