【vue】前端路由-阿里云开发者社区

开发者社区> 景凌凯> 正文

【vue】前端路由

简介:
+关注继续查看
<body>
<!-- 单页网站:整个网站只有一个网页,通过页内跳转实现界面的切换 -->
<!-- 简单的单页效果可以通过选项卡实现,但是界面很多的单页就不适合使用选项卡 -->

<!-- 对于真正的单页网站,需要使用前端路由进行界面的切换 -->

<!-- url中第一个#(含)之后的所有内容都是本url的哈希值 -->

<!-- <a href="http://www.eotodo.com">百度</a> -->

<!-- 一个页面中url的前5部分发生变化,页面都会跳转,而哈希值发生变化时,页面不会进行跳转。
哈希值用于前端页面路由,进行前端的页内跳转,当哈希值变化时,前端页面切换不同的界面-->
<!-- url中的哈希值仅用于前端页面控制,是不会发送到服务器的 -->

<!-- <a href="#home">首页</a> -->
<!-- <a href="#setting">设置</a> -->


<div id="router-view">

</div>

</body>


<script>

let routerView = document.getElementById("router-view");

// onhashchange事件,当页面的url的哈希值发生变化时触发,可以监听此事件来监视页面hash的变化,从而实现前端路由。


// 前端路由的实质功能:根据不同的url哈希值,在路由视图中显示不同的页面,实现非跳转式的页面切换。

function refreshHash(){
if(location.hash=="#home"||location.hash==""){
routerView.innerHTML = `
<h1>首页内容</h1>
<a href="#setting">设置</a>
`;
}else if(location.hash=="#setting"){
routerView.innerHTML = `<h1>设置页面</h1>`;
}
}

window.onhashchange = refreshHash;

refreshHash();


</script>

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
4614 0
前端的对决:React的JSX与Vue的templates
React.js和Vue.js是这个星球上最流行的JavaScript库。它们都很强大,相对来说很容易获取和使用。 React和Vue的共性: 使用虚拟DOM。 提供响应式视图组件。 专注于开发过程中的一个方面。目前集中在视图层。
819 0
业务组件如何优雅的包装(yang)第三方(Vue)组件--《前端那些事》
让全天下的组件为我所用,快点在你的项目中试一试吧。(๑•̀ㅂ•́)و✧
247 0
前端常见Vue2.0面试题
vue3.0出来后,还有部分项目是用2.0开发。所以将曾经旧的阿里云博客迁移了过来。
410 0
+关注
景凌凯
有点尴尬唉 你要寻找的东西已经被吃掉啦!
45
文章
1366
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载