更新时间:2022年01月04日14时36分 来源:传智教育 浏览次数:
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>
<a href="#/movie">Movie</a>
<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
}
}
}