vue(一)

2024-02-18 12:22:06

VUE-Router

VUE-Router 主要和Vue搭配创建单页应用使用的，用vuer-router要将components映射到routes,并告知在哪里渲染组件

动态路由传参

const routes = [
    {
    name: 'detail',
    // 路径中携带参数
    path: '/detail/:id',
    component: detail
    }
] 

// detail 组件中接收路由参数
$route.params.id

const routes = [
    {
    name: 'detail',
    // 路径中携带参数
    path: '/detail/:id',
    component: detail,
    props: true  //设置为true,可在组件中props接收
    }
] 

// detail 组件中接收路由参数
const detail = {
    props: ['id'],
    template: '<div>Detail ID： {{ id }}</div>'
}

vue-router 核心

// 注册插件
// Vue.use() 内部调用传入对象的 install 方法

Vue.use(VueRouter)
// 创建路由对象
const router = new VueRouter({
routes: [
{ name: 'home', path: '/', component: homeComponent }
]
})
// 创建 Vue 实例，注册 router 对象
new Vue({
router,
render: h => h(App)
}).$mount('#app')

hash模式实现

Vue Router 默认使用的是 hash 模式，使用 hash 来模拟一个完整的 URL，通过
onhashchange 监听路径的变化

1-创建 LVueRouter 插件

export default class VueRouter {
  static install(Vue) {
    // 如果插件已经安装直接返回
    if (VueRouter.install.installed && _Vue === Vue) return
    VueRouter.install.installed = true
    _Vue = Vue
    Vue.mixin({
      beforeCreate() {
        // 判断 router 对象是否已经挂载了 Vue 实例上
        if (this.$options.router) {
          // 把 router 对象注入到 Vue 实例上
          _Vue.prototype.$router = this.$options.router
        }
      },
    })
  }
}

2-实现 VueRouter 类 - 构造函数

constructor(options) {
    this.options = options
    this.routerMap = {} //记录组件和路由映射数据
    this.data = _Vue.observable({
      current: '/', //响应式对象，当前路径
    })
  }

3- 实现 LVueRouter 类 - initRouteMap()

 initRouteMap() {
    // routes => [{ name: '', path: '', component: }]
    // 遍历所有的路由信息，记录路径和组件的映射
    this.options.routes.forEach((route) => {
      // 记录路径和组件的映射关系
      this.routeMap[route.path] = route.component
    })
  }

4- 实现 LVueRouter 类 - 注册事件

initEvents () {
    // 当路径变化之后，重新获取当前路径并记录到 current
    window.addEventListener('hashchange', this.onHashChange.bind(this))
    window.addEventListener('load', this.onHashChange.bind(this))
} 

onHashChange () {
	this.app.current = window.location.hash.substr(1) || '/'
}

5- 实现 LVueRouter 类 - router-link 和 router-view 组件

  initComponents() {
    _Vue.component('RouterLink', {
      props: {
        to: String,
      },
      // 需要带编译器版本的 Vue.js
      // template: "<a :href='\"#\" + to'><slot></slot></a>"
      // 使用运行时版本的 Vue.js
      render(h) {
        return h('a', {
          attrs: {
            href: '#' + this.to,
          },
        }, [this.$slots.default])
      }
    })

    const self = this

    _Vue.component('RouterView', {
        render (h) {
            // 根据当前路径找到对应的组件，注意 this 的问题
            const component = self.routeMap[self.app.current]
            return h(component)
        }
    })
  }

注意：
- vue-cli 创建的项目默认使用的是运行时版本的 Vue.js,无编译器
- 如果想切换成带编译器版本的 Vue.js，需要修改 vue-cli 配置
  - 项目根目录创建 vue.config.js 文件，添加 runtimeCompiler
```
module.exports = {
  runtimeCompiler: true
}
```

6- 实现 LVueRouter 类 - init()

  init () {
      this.initRouteMap()
      this.initEvents()
      this.initComponents()
  }

// 插件的 install() 方法中调用 init() 初始化
if (this.$options.router) {
	_Vue.prototype.$router = this.$options.router
	// 初始化插件的时候，调用 init
	this.$options.router.init()
}

history模式实现

https://developer.mozilla.org/zh-CN/docs/Web/API/History_API

实现思路

创建 LVueRouter 插件，静态方法 install
- 判断插件是否已经被加载
- 当 Vue 加载的时候把传入的 router 对象挂载到 Vue 实例上（注意：只执行一次）
创建 LVueRouter 类
- 初始化，options、routeMap、app(简化操作，创建 Vue 实例作为响应式数据记录当前路
  径)
- initRouteMap() 遍历所有路由信息，把组件和路由的映射记录到 routeMap 对象中
- 注册 popstate 事件，当路由地址发生变化，重新记录当前的路径
- 创建 router-link 和 router-view 组件
- 当路径改变的时候通过当前路径在 routerMap 对象中找到对应的组件，渲染 router-view

代码实现

1-; 2-; 3-;同hash

4-实现 LVueRouter 类 - 注册事件

initEvent(){
        window.addEventListener("popstate",()=>{
            this.data.current = window.location.pathname
        })
}

码农公寓