vue-router

• 使用vue.js, 我们可以通过组合组件来组成应用程序，当你要把vue-router添加进来，我们需要做的是将组件components映射到路由routes,然后告诉vue-router在哪里渲染它们
• 导航守卫
  1. 全局守卫（beforeEach、beforeResolve、afterEach）
  2. 路由守卫（beforeEnter）
     3.组件守卫（beforeRouteEnter、beforeRouteUpdate、、beforeRouteLeave）
• 懒加载
  一般webpack会将我们的模块打包成一个js文件，这个文件会随着我们组件模块的增多而体积变大，这时候当我们首屏加载这个js文件的时候，会花费较长的时间，这里懒加载的方式就是把懒加载的模块从这个js文件分离出去，当使用到这个组件的时候在向服务器发送请求，从而减小了一开始请求的js的体积

 .babelrc 文件  npm install  babel-plugin-syntax-dynamic-import -D
 "plugins": [
    "syntax-dynamic-import"
  ]
  routes:
    { path: '/login', component: () => import('../pages/login/Login.vue'), alias:'/b'},
    { path: '/home', component: Home,},
    { path: '/*', component: Other},
分模块配置
webpack 的output配置
   chunkFilename: '[name].bundle.js',
路由组件的写法
  component: () => import( /* webpackChunkName: "login" */ '../pages/login/Login.vue')


// 二级菜单需要添加父组件(Base)，父组件内容需要添加 这里搭配element-ui菜单使用
const Home = () => import( /* webpackChunkName: "home" */ '@pages/home/Home.vue')
const Setting = () => import( /* webpackChunkName: "other" */ '@pages/other/Setting.vue')
import Base from '@component/Base.vue'
const menu_routes =  [
    {
        path: "/home",
        name: "home",
        label: "首页",
        icon: "s-home",
        component: Home
    },
    {
        label: "其他",
        icon: "location",
        path: "/other",
        component:Base,
        children: [
          {
            path: "/other",
            name: "other",
            label: "其他",
            icon: "setting",
            component: Setting
          }
        ],
    },
]

export default {
    menu_routes
}

image.png

• 后端路由：当用户输入url地址，把这个地址发送到服务器，服务器解析请求路径，拿到对应页面返回

• 前端路由：当用户输入url,js解析地址，找到对应的地址页面，看到页面

  
  
  image.png
• hash 模式是在访问路径上存在一个#，hash模式相当于先访问index.html文件，然后再通过html文件的hash值（也就是#后面的路径）来匹配对应的组件（锚点原理），进行动态加载。我们之所以在启动项目的时候看不到index.html是因为服务器默认配置当访问localhost:8080/ 项目文件夹目录的时候，相当于访问http://localhost:8080/index.html，假如我们这里写成http://localhost:8080/index.html/#/other,则相当于访问http://localhost:8080/index.html/index.html/#/other,将找不到这个页面
• history 模式的运行原理不是通过html的锚点，他是利用了js history.push重写url路径但不会向后台发送请求来实现将网页的url地址动态改变，当访问localhost:8080/的时候，是相当于localhost:808服务器去加载index.html
• router-view 渲染路径匹配到的视图组件，换句话说它相当于组件的占位符，当匹配到路径对应的组件时，就将这个router-view占位符替换成相应组件，多级菜单则利用了路由嵌套原理

// 1.使用vue.use说明是一个插件。
// 作用：1.执行里面的方法
/* function a(){
    console.log("100")
}

Vue.use(a) */
// 2.如果你的方法有一个install属性，并且这个属性是一个方法，则他不会执行方法，而是执行install方法,打印200
/* a.install = function(){
    console.log("200")
} */
// 3. install这个方法第一个参数是Vue的狗在函数，是我们可以使用vue相关的api
/* a.install = function(vue){
    console.log(vue)
} */

// 1.实现并声明两个全局注册的组件，router-link 和 router-view
// 2.插件需要实现install，做一个额外的一件事就是this.$router.push实现路由跳转
// 3.点击router-link，router-view会切换 通过地址在路由表中找到对应的components,利用vue响应式
// 1.要求必须要有install方法，被vue调用 2.两个组件、

let Vue; // 保存Vue的构造函数，在插件中使用

class VueRouter {
    constructor(options) {
        this.$options = options
        // 需要把this.current 变为响应式的数据
        let initial = window.location.hash.slice(1) || "/"
        Vue.util.defineReactive(this, "current", initial)
        window.addEventListener("hashchange", () => {
            // this.current不是响应式的数据
            this.current = window.location.hash.slice(1) || "/"
        })
    }
}

// 在使用vue.use(VueRouter)的时候，是还没有拿到router的实例的，
// 所以这个install方法需要延迟到一个时机到router创建完毕并附加到选项上是才执行
VueRouter.install = (_Vue) => {
    Vue = _Vue
    // 1.挂载$touter属性 this.$router.push
    // 全局混入延迟到一个时机到router创建完毕并附加到选项上是才执行
    Vue.minxin({
        beforeCreate() {
            // 注意此钩子在每个组件创建实例的时候都会调用
            // 根实例才有该选项
            if (this.$options.router) {
                // 每个子组件的实例都是继承根实例Vue的
                Vue.prototype.$router = this.$options.router
            }
        }
    })

    // 实现两个组件 router-link router-view
    Vue.component("router-link", {
        props: {
            to: {
                type: String,
                required: true
            }
        },
        render(h) {
            return h('a', {
                attrs: {
                    href: `#${this.to}`
                }
            }, this.$slots.default)
        }
    })

    // 根据当前地址去路由表找到，然后进行组件渲染
    Vue.component("router-view", {
        render(h) {
            let component = null
            const current = this.$router.current
            const route = this.$router.$options.routes.find(route => route.path === current)
            if (route) {
                component = route.component
            }
            return h(component)
        }
    })
}

export default VueRouter



/* Vue.use(VueRouter)
const vm = new Vue({
    el:'#app',
    router,
    store,
    render: (h) => h(App)
}) */