前端路由是什么意思？怎样实现一个简单的前端路由？-优快云博客

博客介绍了路由概念，区分前端路由与后端路由，指出前端路由是Hash地址与组件的对应关系。阐述了SPA（单页面应用）需通过前端路由实现组件切换。还说明了前端路由工作方式，并给出实现简易前端路由的步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是路由

路由(英文：router)就是对应关系，路由分为前端路由和后端路由，通俗的讲前端路由就是，Hash 地址与组件之间的对应关系。

SPA与前端路由

SPA 指的是一个 web 网站只有唯一的一个 HTML 页面，所有组件的展示与切换都在这唯一的一个页面内完成。

此时，不同组件之间的切换需要通过前端路由来实现。

结论：在 SPA 项目中，不同功能之间的切换，要依赖于前端路由来完成!

前端路由的工作方式

①用户点击了页面上的路由链接

②导致了 URL 地址栏中的 Hash 值发生了变化

③前端路由监听了到 Hash 地址的变化

④前端路由把当前 Hash 地址对应的组件渲染都浏览器中

实现简易的前端路由

步骤1：导入并注册MyHome、MyMovie、MyAbout 三个组件。示例代码如下：

import MyHome from './components/MyHome.vue'
import MyMovie from './components/MyMovie.vue'
import MyAbout from './components/MyAbout.vue'
export default {
    components: {
        MyHome,
        MyMovie,
        MyAbout,
    }，
}

步骤2：通过标签的is 属性，动态切换要显示的组件。示例代码如下：

< template > 
 < h1 > App 组件 < /h1> 


 < component: is = "comName" > < /component> 
< /template>
export default t
data() {
    return {
        comName： 'my-home'， //要展示的组件的名称
    }
  },
}

步骤3：在组件的结构中声明如下3 个链接，通过点击不同的链接，切换浏览器地址栏中的Hash 值

<a href="#/home">Home</a>&nbsp;
<a href="#/movie">Movie</a>&nbsp;
<a href="#/about">About</a>

步骤4：在created生命周期函数中监听浏览器地址栏中Hash 地址的变化，动态切换要展示的组件的名称：

created() {
    windoiufonhashchange = () => {
        switch (location.hash) {
            case '#/home'： //点击了“首页“的链接
            this.comName = 'my-home'
            break
            case '#/movie'： //点击了“电影”的链接
            this.comName = 'my-movie'
            break
            case '#/about'： //点击了“关于”的链接
            this.comName = 'my-about'
            break
        }
    }
}