【Vue学习记录 3 】Webpack、Vue2框架(router路由)、导航守卫、vuex

1 Webpack

1.1 什么是webpack

1.2 前端模块化

1.3 与其他打包工具frunt/gulp对比

webpack的正常运行，必须依赖node环境，而npm是管理node依赖包

关闭ESLink

2 Tips(关于main.js 内的 render）

new Vue({
  el:'#app',
  render :function(createElement) {
    //1.普通用法 createElement('标签’，{标签的属性]，[’'〕)
    return createElement('h2',{class:'box'},['Hello world', 
              createElement('button',['按钮'])])
    //2.调用组件的用法
    return createElement(cpn)
  }     
})

//3.直接调用外部App.vue
new Vue({
  el: '#app',            
  render: c => c(App),   
  router                  
})

//----------------------------cpn
const cpn = {
  template: `<div>{{message}}</div>`,
  data(){return{message:'我是组件'}}
}

runtime-compiler
template > ast > render > vdom > UI

runtime-only（性能更高、代码更少）
render > vdom > UI

3 router路由(Vue框架)

3.1 什么是路由-页面渲染

路由routing：就是通过互联的网络把信息从北源地址传输到目的地址的活动.

路由中有一个非常重要的概念：路由表。
路由表本质上就是一个映射表,决定了数据包的指向.

3.1.1 后端路由阶段

早期开发通过：后端渲染+后端路由
后端渲染：在服务器中通过jsp/php技术渲染好页面，在发送到浏览器上

3.1.2 前端路由阶段

前后端分离阶段

服务器存储API接口，静态资源服务器存储 多份html+css+js
两者在浏览器需要时发送给它进行渲染
此时暂无前端路由的概念

SPA页面/单页面富应用阶段

与前后端分离不同的是，在静态资源服务器中 只存储一份html+css+js，浏览器请求时全部发送
前端路由：因为只有一份html，前端路由管理的就是url改变后重新渲染页面（而不刷新页面）

3.2 SPA的页面跳转

页内跳转，不请求服务器的html+css+js

URL的hash

补充说明:上面只演示了三个方法
因为history.back()等价于history.go(-1)
history.forward()则等价于history.go(1)
这三个接口等同于浏览器界面的前进后退。

4 路由的基本使用

4.1 router.js详解

步骤二，在Vue中使用插件，实现路由

*******router*****************
//配置路由相关的信息
import VueRouter from 'vue-router '
import Vue from 'vue '

// 1.通过Vue.use(插件)，安装插件
vue.use(vueRouter)

// 2.创建VueRouter对象
const routes =[

]
const router =new VueRouter({
//配置路由和组件之间的应用关系routes
routes
})

// 3.将router对象传入到vue实例
export default router



*******mian.js**************
import vue from 'vue '
import App from './App'
import router from './router'  //vue中的import目录会自动定位里面的index.js

vue.config.productionTip = false
new Vue({
el: '#app',
router: router,
render: h =>h(App)
}

4.2 路由跳转的具体实现

//1.创建路由组件///
//components/Home.vue/
<template>
  <div><h1>我是home</h1></div>
</template>

<script>
export default {
  name: 'Home'
}
</script>
<style></style>

//components/About.vue/
<template>
  <div><h1>我是关于</h1></div>
</template>

<script>
export default {
  name: 'About'
}
</script>
<style></style>


//2.设置映射关系
//router/index.js/
import VueRouter from 'vue-router '
import Vue from 'vue '

//导入组件
import Home from '../component/Home'
import About from '../component/About'

vue.use(vueRouter)
const routes =[
  {
    //此处是path，不是url的原因，url是http……的格式
    path: '/home',  
    template:null
  },
  {
    path: '/about',
    template:null
  }
]
const router =new VueRouter({
	routes,
    mode:'history'
})
export default router

//3.使用路由//
//App.js/
<template>
  <div id="app">  
    <!-- router-link：全局组件   router-link：渲染routerlink的内容，方法是替换routerview -->
    <router-link to="/home">首页</router-link>
    <router-link to="/about">关于</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>
<style></style>

4.2.1 路由默认路径

4.2.2 url，修改hash路径为html

//router.js//
const router = new VueRouter({
	routes,
	mode:'history' //将url内的hash表示转换成html网站
})

4.2.3 router-link 补充

<router-link to=" /home" tag="button" replace active-class="active">首页</router-link>

tag:修改默认a标签
replace：设定网页不能回退
active-class：设定默认的class名称(可以用默认存在的class设定css)，也可以在router.js中改

4.3 用代码实现router路由跳转

$router.push() 和 $router.replace()

4.4 动态路由

5 路由懒加载

5.1 懒加载的方式

///ES6写法/
import Vue from 'vue'
import VueRouter from 'vue-router'  
Vue.use(VueRouter)     

const Login = () => import('../pages/Login.vue')
const Info = () => import('../pages/InfoPage.vue')

             
const routes = [
    {path: '/',component:Login},
    {path: '/Info',component:Info}
  ]

const router = new VueRouter({
    routes,
    mode:'history'
})

export default router
/AMD写法
// export default new Router({
//     routes: [
//     {
//       path: '/',
//       component: resolve => require(['../pages/Login.vue'], resolve) 
//     },
//     {
//       path: '/Info',
//       component: resolve => require(['../pages/InfoPage.vue'], resolve)
//     }
// ]
// })

5.2 嵌套懒加载

5.3 路由嵌套小练习

路由嵌套小练习

6 导航守卫（钩子）【待补充】

7 vuex