vue-router实现原理

目录

hash模式

window.location

代码实现

history模式

window.history

代码实现

路由守卫事件

路由生命周期执行的先后顺序

路由与组件声明周期的先后顺序

router-link 与 a

$route.matched

问题

不同路由跳转到相同页面，缓存问题

---

vue-Router实现了在不刷新页面的情况下，通过改变路由的URL去改变页面的视图

hash模式

对hashchange事件进行监听，当hash值发生变化时，渲染该hash值下对应的组件

window.location

代码实现

  
    
    
    
    
  
  
    Home
    页面A
    


    
  

点击Home，效果如下

history模式

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes //array
})

window.history

length

历史记录个数，history.back()操作不会减少记录个数

state

可认为是该页面的接收参数，根据pushState()方法可向具体URL传参state

pushState(state, title, url)

• 修改浏览器历史记录，入栈，但是不操作浏览器的前进、后退；
• 如果为绝对路径，需要与当前路径同源

replaceState(state, title, url)

替换当前历史记录

back()：操作浏览器后退

forward()：操作浏览器前进

go()：操作浏览器跳往第几个栈记录

代码实现

history模式就是利用pushState()改变历史记录，t同时进行对应路由组件的渲染，监听popstate事件实现浏览器路由跳转时，渲染不同的组件内容

路由守卫事件

路由生命周期执行的先后顺序

刷新进入页面A 

 从'/a'进入’/b'

  从'/a'进入’/a?name=aa'

路由与组件声明周期的先后顺序

进入A页面：执行顺序，路由的声明周期 > 组件的生命周期

 离开A页面（从 '/a' 到 '/' ）：执行顺序，路由的声明周期 > 组件的生命周期

router-link 与 a

• 标签去往的路由会重新渲染页面、可以使用_target="_blank"新打开一个标签页面
• 可以进行replace操作

$route.matched

是一个数组，匹配当前的路由一级路由的祖父级

const routes = [
  {
    path: '/a',
    name: 'a',
    component: () => import("@/views/A.vue"),
    children: [
      {
        path: 'c',
        name: 'c',
        component: () => import("@/views/child/C.vue"),
      }
    ]
  },
]

访问'/a/c'时，matched如下 

问题

不同路由跳转到相同页面，缓存问题

现象：后台管理界面，存在二级路由，从'/home/a' 切换到 '/home/b' ,但当前这两个路由对应的是同一个页面组件，此时会出现缓存现象，第二次访问不会进行mounted之前周期的渲染。

//router.js
const routes = [
  {
    path: '/home',
    name: 'home',
    component: Home,
    meta: { static: true },
    // /a , /b 对印着同一个页面
    children: [
      { path: 'a', componentPath: 'views/child/A.vue' },
      { path: 'b', componentPath: 'views/child/A.vue' }]
  },
]

解决方法：

 1.在home的route-view标签中设置key，是vue-router认为这是两个不同的路由