简易前端路由-点击菜单切换到对应的信息栏

<body><div id="app"><!-- hash值  就是链接地址 --><a href="#/zhuye">主页</a><a href="#/keji">科技</a><a href="#/caijing">财经</a><a href="#/yule">娱乐</a><!-- 根据动态绑定指定的组件名称 把对应的组件渲染到component标签所在的位置 --><component :is="comName"></component></div></body></html><script>// 需要被切换的4个组件const zhuye = {template: '<h1>主页</h1>'}const keji = {template: '<h1>科技</h1>'}const caijing = {template: '<h1>财经</h1>'}const yule = {template: '<h1>娱乐</h1>'}const vm = new Vue({el: '#app',data: {comName: 'zhuye' //默认显示主页},//注册私有组件components: {zhuye,keji,caijing,yule}});// 监听window的onhashchange事件根据获取到最新的hash值 切换到要显示的组件名称window.onhashchange = function() {// console.log(location.hash);// 通过location.hash 获取到最新的hash值switch (location.hash.slice(1)) {//获取到最新的a  给comName赋值case '/zhuye':vm.comName = 'zhuye'breakcase '/caijing':vm.comName = 'zhuye'breakcase '/keji':vm.comName = 'keji'breakcase '/yule':vm.comName = 'yule'break}}
</script>

点击财经显示对应的信息

主要是为了实现功能没有给样式。些微有点丑。。

简易前端路由-点击菜单切换到对应的信息栏相关推荐

[Vue.js] 路由 -- 前端路由
路由的基本概念与原理路由本质是对应关系后端路由概念 : 根据不同的用户URL请求,返回不同的内容本质 : URL请求地址与服务器资源之间的对应关系 SPA 后端渲染(存在性能问题) Ajax ...
Vue学习笔记（四）—— 前端路由
介绍本文主要介绍路由的相关知识,当然主要是以Vue的路由为主要介绍对象. 有兴趣的朋友可以看看之前的文章: Vue学习笔记(一)-- 常用特性 Vue学习笔记(二)-- 组件开发 Vue学习笔记(三 ...
Vue前端路由~满满的干货
文章目录目标目录路由的基本概念与原理路由后端路由 SPA(Single Page Application) 前端路由实现简易前端路由 Vue Router vue-router的基本使用 ...
Vue前端路由~非常详细哦，不要错过
下面是对Vue前端路由的整理,希望可以帮助到有需要的小伙伴~ 文章目录目标目录路由的基本概念与原理路由后端路由 SPA(Single Page Application) 前端路由实现简易前 ...
Vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换
vue2.0使用嵌套路由实现页面跳转切换/公用一级菜单控制页面内容切换/routes配置children demo需求分析: 图中菜单区域为header公用组件,点击相应的菜单选项跳转到对应的路由,在 ...
Vue el-menu高亮设置及点击菜单项实现路由跳转
el-menu相关知识记录一.el-menu菜单项高亮设置二.点击菜单项实现路由跳转 2021/11/13 知识点记录一.el-menu菜单项高亮设置 el-menu高亮是通过:default- ...
vue切换菜单时不需要页面刷新_antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作...
废话不说,上代码! nav 1 nav 2 nav 3 重点: 1,selectedkeys要设置成$route.path地址 2,a-menu-item 的key设置成要去的地址刷新页面,成功! ...
前端路由的概念与原理
前端路由router的概念与原理 1. 什么是路由路由(英文:router)就是对应关系. 2. SPA 与前端路由 SPA 指的是一个 web 网站只有唯一的一个 HTML 页面,所有组件的展示与 ...
html5怎么改为vue_【面试需要Vue全家桶】一文带你看透Vue前端路由
作者 | Jeskson 掘金 | https://juejin.im/user/5a16e1f3f265da43128096cb 2020.1.11 背景介绍 vue router是vue.js ...

简易前端路由-点击菜单切换到对应的信息栏

简易前端路由-点击菜单切换到对应的信息栏相关推荐

最新文章

热门文章