手把手写一个Vue-router，无惧面试官的vueRoute题目

最新推荐文章于 2024-05-22 13:52:22 发布

VIP文章 yyds2026

最新推荐文章于 2024-05-22 13:52:22 发布

阅读量266

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/yyds2026/article/details/127051654

版权

一、核心原理

1.什么是前端路由？

在 Web 前端单页应用 SPA(Single Page Application)中，路由描述的是 URL 与 UI 之间的映射关系，这种映射是单向的，即 URL 变化引起 UI 更新（无需刷新页面）。

2.如何实现前端路由？

要实现前端路由，需要解决两个核心：

如何改变 URL 却不引起页面刷新？
如何检测 URL 变化了？

下面分别使用 hash 和 history 两种实现方式回答上面的两个核心问题。

hash 实现

hash 是 URL 中 hash (#) 及后面的那部分，常用作锚点在页面内进行导航，改变 URL 中的 hash 部分不会引起页面刷新

通过 hashchange 事件监听 URL 的变化，改变 URL 的方式只有这几种：

通过浏览器前进后退改变 URL
通过<a>标签改变 URL
通过window.location改变URL

history 实现

history 提供了 pushState 和 replaceState 两个方法，这两个方法改变 URL 的 path 部分不会引起页面刷新

history 提供类似 hashchange 事件的 popstate 事件，但 popstate 事件有些不同：

通过浏览器前进后退改变 URL 时会触发 popstate 事件
通过pushState/replaceState或<a>标签改变 URL 不会触发 popstate 事件。
好在我们可以拦截 pushState/replaceState的调用和<a>标签的点击事件来检测 URL 变化
通过js 调用history的back，go，forward方法课触发该事件

所以监听 URL 变化可以实现，只是没有 hashchange 那么方便。

vue实战视频讲解：进入学习

二、原生js实现前端路由

1.基于 hash 实现

html

<!DOCTYPE html>
<html lang="en">
<body>
<ul>
    <ul>
        <!-- 定义路由 -->
        <li><a href="#/home">home</a></li>
        <li><a href="#/about">about</a></li>

        <!-- 渲染路由对应的 UI -->
        <div id="routeView"></div>
    </ul>
</ul>
</body>
<script>
    let routerView = routeView    window.addEventListener('hashchange', ()=>{
             let hash = location.hash;        routerView.innerHTML = hash    })    window.addEventListener('DOMContentLoaded', ()=>{
             if(!location.hash){
     //如果不存在hash值，那么重定向到#/
            location.hash="/"
        }else{
     //如果存在hash值，那就渲染对应UI
            let hash = location.hash;            routerView.innerHTML = hash        }    })
</script>
</html>

解释下上面代码，其实很简单：

我们通过a标签的href属性来改变URL的hash值（当然，你触发浏览器的前进后退按钮也可以，或者在控制台输入window.location赋值来改变hash）
我们监听hashchange事件。一旦事件触发，就改变routerView的内容，若是在vue中，这改变的应当是router-view这个组件的内容
为何又监听了load事件？这时应为页面第一次加载完不会触发 hashchange，因而用load事件来监听hash值，再将视图渲染成对应的内容。

2.基于 history 实现

<!DOCTYPE html>
<html lang="en">
<body>
<ul>
    <ul>
        <li><a href='/home'>home</a></li>
        <li><a href='/about'>about</a></li>

        <div id="routeView"></div>
    </ul>
</ul>
</body>
<script>
    let routerView = routeView    window.addEventListener('DOMContentLoaded', onLoad)    window.addEventListener('popstate', ()=>{
             routerView.innerHTML = location.pathname
    })    function onLoad () {
             routerView.innerHTML = location.pathname
        var linkList = document.querySelectorAll('a[href]')        linkList.forEach(el => el.addEventListener('click', function (e) {
                 e.preventDefault()            history.pushState(null, '', el.getAttribute('href'))            routerView.innerHTML = location.pathname
        }))    }

</script>
</html>

解释下上面代码，其实也差不多：

我们通过a标签的href属性来改变URL的path值（当然，你触发浏览器的前进后退按钮也可以，或者在控制台输入history.go,back,forward赋值来触发popState事件）。这里需要注意的就是，当改变path值时，默认会触发页面的跳转，所以需要拦截 <a> 标签点击事件默认行为，点击时使用 pushState 修改 URL并更新手动 UI，从而实现点击链接更新 URL 和 UI 的效果。
我们监听popState事件。一旦事件触发，就改变routerView的内容。
load事件则是一样的

有个问题：hash模式，也可以用history.go,back,forward来触发hashchange事件吗？

A：也是可以的。因为不管什么模式，浏览器为保存记录都会有一个栈。

三、基于Vue实现VueRouter

我们先利用vue-cli建一个项目

代码如下:

App.vue

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/home">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from "../views/About.vue"
Vue.use(VueRouter)
  const routes = [
  {
   
    path: '/home',
    name: 'Home',
    component: Home
  },
  {
   
    path: '/about',
    name: 'About',
    component: About
  }
]
const router = new

最低0.47元/天解锁文章

yyds2026

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
手把手写一个Vue-router，无惧面试官的vueRoute题目

在 Web 前端单页应用 SPA(Single Page Application)中，路由描述的是 URL 与 UI 之间的映射关系，这种映射是单向的，即 URL 变化引起 UI 更新（无需刷新页面）。
复制链接

扫一扫