Vue Router实现原理

基础回顾

使用步骤：
1、创建router对象，router/index.js

import Vue from 'vue' 
import VueRouter from 'vue-router' 
// 路由组件 
import index from '@/views/index' 
// 组成插件 
Vue.use(VueRouter) 
// 路由规则 
const routes = [ { name: 'index', path: '/', component: index } ]
// 路由对象 
const router = new VueRouter({ routes })
export default router

2、注册router对象，main.js

import router from './router'

new Vue({
	render: h => h(App),
	router
}).$mount('#app')

3、创建路由组建占位，App.vue

<router-view></router-view>

4、创建链接

<router-link to="./">首页</router-link>
<router-link :to="{name:'index'}">首页</router-link>

$route：是路由规则
$router：是路由对象
$router里currentRoute放的是路由的规则

动态路由

import Vue from 'vue'
import VueRouter from 'vue-router'
import Index from '../views/Index.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Index',
    component: Index
  },
  {
    path: '/detail/:id',
    name: 'Detail',
    // 开启 props，会把 URL 中的参数传递给组件
    // 在组件中通过 props 来接收 URL 参数
    props: true,
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "detail" */ '../views/Detail.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

嵌套路由

const routes = [
  {
    name: 'login',
    path: '/login',
    component: Login
  },
  // 嵌套路由
  {
    path: '/',
    component: Layout,
    children: [
      {
        name: 'index',
        path: '',
        component: Index
      },
      {
        name: 'detail',
        path: 'detail/:id',
        props: true,
        component: () => import('@/views/Detail.vue')
      }
    ]
  }
] 

编程式导航

// 跳转到指定路径 
router.push('/login') 
// 命名的路由 
router.push({ name: 'user', params: { id: '5' }}) 
router.replace() 
router.go()

Hash 模式 和 History 模式的区别

原理的区别
hash 模式
Vue Router 默认使用的是 hash 模式，使用 hash 来模拟一个完整的 URL，通过
onhashchange 监听路径的变化
History 模式
基于 History API

history.pushState() 
history.replaceState() 
history.go()

开启 History 模式

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

HTML5 History 模式的使用

1. History 需要服务器的支持
2. 单页应用中，服务端不存在 http://www.testurl.com/login 这样的地址会返回找不到该页面
3. 在服务端应该除了静态资源外都返回单页应用的 index.html

nginx 环境配置

location / {
 root html;
  index index.html index.htm;
   #新添加内容 
   #尝试读取$uri(当前请求的路径)，如果读取不到读取$uri/这个文件夹下的首页 
   #如果都获取不到返回根目录中的
    index.html try_files $uri $uri/ /index.html;
     }

# 启动
 start nginx
# 重启
 nginx -s reload 
# 停止
 nginx -s stop

Vue Router 模拟实现

实现类图

实现思路

创建 LVueRouter 插件，静态方法 install

• 判断插件是否已经被加载
• 当 Vue 加载的时候把传入的 router 对象挂载到 Vue 实例上（注意：只执行一次）

创建 LVueRouter 类

• 初始化，options、routeMap、app(简化操作，创建 Vue 实例作为响应式数据记录当前路
  径)
• initRouteMap() 遍历所有路由信息，把组件和路由的映射记录到 routeMap 对象中
• 注册 popstate 事件，当路由地址发生变化，重新记录当前的路径
• 创建 router-link 和 router-view 组件
• 当路径改变的时候通过当前路径在 routerMap 对象中找到对应的组件，渲染 router-view

console.dir(Vue)
let _Vue = null
class VueRouter {
    static install(Vue){
        //1 判断当前插件是否被安装
        if(VueRouter.install.installed){
            return;
        }
        VueRouter.install.installed = true
        //2 把Vue的构造函数记录在全局
        _Vue = Vue
        //3 把创建Vue的实例传入的router对象注入到Vue实例
        // _Vue.prototype.$router = this.$options.router
        _Vue.mixin({
            beforeCreate(){
                if(this.$options.router){
                    _Vue.prototype.$router = this.$options.router
                    
                }
               
            }
        })
    }
    constructor(options){
        this.options = options
        this.routeMap = {}
        // observable
        this.data = _Vue.observable({
            current:"/"
        })
        this.init()

    }
    init(){
        this.createRouteMap()
        this.initComponent(_Vue)
        this.initEvent()
    }
    createRouteMap(){
        //遍历所有的路由规则 吧路由规则解析成键值对的形式存储到routeMap中
        this.options.routes.forEach(route => {
            this.routeMap[route.path] = route.component
        });
    }
    initComponent(Vue){
        Vue.component("router-link",{
            props:{
                to:String
            },
            render(h){
                return h("a",{
                    attrs:{
                        href:this.to
                    },
                    on:{
                        click:this.clickhander
                    }
                },[this.$slots.default])
            },
            methods:{
                clickhander(e){
                    history.pushState({},"",this.to)
                    this.$router.data.current=this.to
                    e.preventDefault()
                }
            }
            // template:"<a :href='to'><slot></slot><>"
        })
        const self = this
        Vue.component("router-view",{
            render(h){
                // self.data.current
                const cm=self.routeMap[self.data.current]
                return h(cm)
            }
        })
        
    }
    initEvent(){
        //
        window.addEventListener("popstate",()=>{
            this.data.current = window.location.pathname
        })
    }
}

注意：

• vue-cli 创建的项目默认使用的是运行时版本的 Vue.js
• 如果想切换成带编译器版本的 Vue.js，需要修改 vue-cli 配置
  项目根目录创建 vue.config.js 文件，添加 runtimeCompiler

module.exports = {
 runtimeCompiler: true 
 }