首页技术文章正文

什么是前端路由?前端路由的工作方式

更新时间:2022-01-10 来源:黑马程序员 浏览量:

什么是路由

路由(英文: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
        }
    }
}






猜你喜欢:

整合项目和路由功能的开发

页面路由是什么意思?【图文介绍前后端路由】

实现单页面前端路由的两种方式

Django框架中路由详细介绍

黑马程序员HTML前端与移动开发培训

分享到:
在线咨询 我要报名
和我们在线交谈!