项目准备 day09

1.vue_base

方法：render：h=>h(组件对象)

    render:function(createElement){return createElement("普通标签名称","标签内容")}

    render:function(createElement){return 组件对象}

        所有带runtime的vue源码版本 都是只有运行时的! 没有能力解析template配置

        所有bu带runtime的vue源码版本 是包含运行时&编译器的 有能力解析template配置

2.vue_cli

1）脚手架配置

outputDir:""      生产环境构建的目录名称

lintOnSave:false     是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码

    "warning"/true:控制台只会弹出eslint的错误信息!不会影响项目的阅读!

    error: 控制台弹出eslint的错误信息!会影响项目的阅读!  项目启动时也会做eslint检验

    default: 控制台弹出eslint的错误信息!会影响项目的阅读! 项目启动时不会做eslint检验

    false: 关闭检验!

configureWebpack:{}   写原生的webpack配置

devServer:{}    所有开发服务器的配置

2）包的查找机制

  vue脚手架中找包有两种规则:

    1） 配别名

        resolve: {

            alias: {

              vue$: 'vue/dist/vue.runtime.esm.js'

            }

        }

        找别名对应的文件!!!!!

    2） 没有配别名

       去node_modules找对应的包

       找到包之后 找包的package.json文件.module字段

       找到包之后 找包的package.json文件.main字段

       如果以后两个字段都没有 或者 是无效路径

       则找当前包底下的index.js文件

       则找当前包底下的index.json文件

3）vue.config.js

const path = require("path")
function reslove(dir){
    return path.join(__dirname,dir)
}

module.exports = {
    lintOnSave:false,
    //写原生的webpack配置
    configureWebpack:{
        resolve: {
            alias: {
                components:reslove("src/components"),
                pages:reslove("src/pages"),
                router:reslove("src/router"),
                routes:reslove("src/routes"),
            }
        }
    }
}

3.vue_router

1）元信息

meta：{}  配置路由相关的信息，比name功能强大，是一个对象

使用：this.$route.meta.属性名

//定义--> routes
    {path:"/404",component: notFind,meta:{name:"404"}},


//使用
    <div v-if="$route.meta.name !== `404`">

2）路由懒加载

当切换普通路由时，路由会重新加载，此时可以用路由的缓存来实现路由的懒加载

普通定义
// import a from "pages/a.vue"
// import b from "pages/b.vue"
// import notFind from "pages/404/404.vue"

路由懒加载
const a = ()=> import(/* webpackChunkName: "v-a" */"pages/a.vue")
const b = ()=> import(/* webpackChunkName: "v-b" */"pages/b.vue")
const notFind = ()=> import(/* webpackChunkName: "404" */"pages/404/404.vue")

路由懒加载的要求就是: component得是一个函数 这个函数要返回一个promise 这个promise所持有的值得的组件对象!

/* webpackChunkName: "v-a" */--> 自定义路由切换时的名字

3）路由滚动行为

export default new VueRouter({
    routes,
    mode:"history",
    scrollBehavior (to, from, savedPosition) {
        return {x:0,y:0}
    }
})

4）路由守卫

全局路由守卫   在router中定义

//全局路由守卫  前置守卫
router.beforeEach((to,from,next)=>{
    console.log("全局前置守卫",from,to);

    //不管什么路由 都要 跳转到404
    /*if(to.meta.name !== "404"){
        // next("/404")
        next({
            path:"/404"
        })
    }else {
        next()
    }*/

    next()
})

//全局路由守卫  解析守卫
router.beforeResolve((to,from,next)=>{
    console.log("全局解析守卫",from,to);
    next()
})

//全局路由守卫 后置守卫
router.afterEach((to, from) => {
    console.log("全局后置守卫");
})

路由级别的守卫   在routes中定义

    {
        path:"/b",
        component:b,
        beforeEnter: (to, from, next) => {
            console.log("b路由独享级别的守卫",from,to);
            next()
        }
    },

组件级别的路由守卫    在组件中定义

            //组件级别的路由守卫
        beforeRouteEnter(to, from, next) {
            // 在渲染该组件的对应路由被 confirm 前调用
            // 不！能！获取组件实例 `this`
            // 因为当守卫执行前，组件实例还没被创建

            console.log("b组件独享的路由守卫 进入状态",from,to,this);
            next((vm)=>{
                console.log("b.next.()=>{}",vm)
            })
        },
        beforeRouteUpdate(to, from, next) {
            // 在当前路由改变，但是该组件被复用时调用
            // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
            // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
            // 可以访问组件实例 `this`
            console.log("b组件独享的路由守卫 复用状态",from,to);
            next()
        },

        beforeRouteLeave(to, from, next) {
            // 导航离开该组件的对应路由时调用
            // 可以访问组件实例 `this`
            console.log("a组件独享的路由守卫  离开状态",from,to);
            next()
        }