Vue基础巩固（三）

1.前端模块化

>var ModuleA = (function () {
   let obj = {}
   obj.flag = true
   obj.myFunc = function (info) {
       console.log(info)
   }
   return obj
>})()

>if(ModuleA.flag){
   console.log(213)
>}
>ModuleA.myFunc("我是一个模块")
>console.log(ModuleA)

2. CommonJS
2.1 CommonJS的导出

>module.exports = {
   flag:true,
   test(a,b){
       return a+ b
   }
>}

2.2 CommonJS的导入
let { flag ,test} = require('module.js')

3. export【ES6】
export使用:export指令用于导出变量,函数,类
export default：一个模块中包含某个的功能，不希望给这个功能命名
export default在同一个模块中，不允许同时存在多个
export default function (a,b) {return a * b} 【info.js文件】
import myFunc from './info.js' myFunc() 【其他文件中引入】

4. import【ES6】
4.1某个模块中所有的信息都导入
通过*导入模块中所有的export变量
通常情况下我们需要给*起一个别名，方便后续的使用
import *as info from ''./info.js

5. vue-router
5.1 vue-router的标签router-link router-view

// <router-link>: 该标签是一个vue-router中已经内置的组件, 它会被渲染成一个<a>标签
// tag:指定<router-link>之后渲染成什么组件
// replace: replace不会留下history记录, 所以指定replace的情况下, 后退键返回不能返回到上一个页面中
// active-class: 当<router-link>对应的路由匹配成功时, 会自动给当前元素设置一个router-link-active的class, 设置active-class可以修改默认的名称
<router-link to='/home' tag='li'>

<router-view>: 该标签会根据当前的路径, 动态渲染出不同的组件
// 在路由切换时, 切换的是<router-view>挂载的组件, 其他内容不会发生改变

// 让路径默认跳到到首页:
const routes = [
   {
       path: '/',
       redirect: '/login'
   },
   {
       path: '/login',
       component: () => import('../views/Login')
   },
]

// 改变路径的方式: HTML5的history URL的hash
const router = new VueRouter({
   base: process.env.BASE_URL,
   routes,
   mode:'history'
})

5.2路由代码跳转
this.$router.push(“/home”) 
5.3动态路由

5.4路由的懒加载
作用:将路由对应的组件打包成一个个的js代码块,只有在这个路由被访问到的时候, 才加载对应的组件
方式一: 结合Vue的异步组件和Webpack的代码分析
const Home = resolve => { require.ensure(['../components/Home.vue'], () => { resolve(require('../components/Home.vue')) })};
方式二: AMD写法
const About = resolve => require(['../components/About.vue'], resolve);
方式三: 使用ES6写法来组织Vue异步组件和Webpack的代码分割
const Home = () => import('../components/Home.vue')

5.5嵌套路由
嵌套路由也可以配置默认的路径
{path:'',Redirect:'message'}
1.在路由映射中配置对应的子路由

{
  path: '/about',
  name: 'About',
  component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
  children:[{
    path:'/message',
    component:() => import('../components/hello.vue')
  }]
}

2.在组件内部使用标签
<router-link to="/about/message">跳转hello</router-link> <router-view><router-view>

5.6传递参数:params和query
params的类型:
配置路由格式: /router/:id
传递的方式: 在path后面跟上对应的值
传递后形成的路径: /router/123, /router/abc
query的类型:
配置路由格式: /router, 也就是普通配置
传递的方式: 对象中使用query的key作为传递方式
传递后形成的路径: /router?id=123, /router?id=abc
使用传递参数：
1.router-link标签
<router-link :to="{path:'/about/message',query:{name:'he',age:18}}">跳转hello</router-link>
2.JavaScript代码

this.$router.push({
   path:'/about/message',
   query: {name: 'he',age:18}
})

3.获取参数
获取参数通过$route对象获取的
4.$route和$router的区别是什么？
1.$router为VueRouter实例，想要导航到不同URL，则使用$router.push方法
2.$route为当前router跳转对象里面可以获取name、path、query、params等

5.7导航守卫
作用：监听监听路由的进入和离开的

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
Vue.use(VueRouter)
 const routes = [
 {
   path: '/',
   name: 'Home',
   component: Home,
   meta:{
     title:'首页'
   }
 },
 {
   path: '/about',
   name: 'About',
   component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
   children:[{
     path:'message',
     component:() => import('../components/hello.vue')
   }],
   meta:{
     title:'关于'
   }
 },
 {
   path: '/register',
   name: 'Register',
   component: () => import(/* webpackChunkName: "about" */ '../views/Register.vue'),
   meta:{
     title:'注册'
   }
 }
]
//  mode:'history' hash
const router = new VueRouter({
 routes,
 mode:'hash'
})

//vue-router提供了beforeEach和afterEach的钩子函数, 它们会在路由即将改变前和改变后触发
//导航钩子的三个参数解析:
//to: 即将要进入的目标的路由对象.
//from: 当前导航即将要离开的路由对象.
//next: 调用该方法后, 才能进入下一个钩子.

router.beforeEach((to,from,next)=> {
 window.document.title = to.meta.title
 next()
})
export default router

补充一:如果是后置钩子, 也就是afterEach, 不需要主动调用next()函数.
补充二: 上面我们使用的导航守卫, 被称之为全局守卫.
路由独享的守卫.
组件内的守卫.
5.8 keep-alive

//keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态(不会被重新创建和销毁)，或避免重新渲染
//如果是嵌套路由还需要keep-alive需要包裹App.vue里的router-view

include - 字符串或正则表达，只有匹配的组件会被缓存
exclude - 字符串或正则表达式，任何匹配的组件都不会被缓存
如果直接被包在 keep-alive 里面，所有路径匹配到的视图组件都会被缓存
通过create声明周期函数来验证