html5怎么改为vue_Vue实战——编程式导航打开新窗口,登录状态本地存储

近日来,我陆续的分享了vue相关的系列文章,以新闻列表项目为载体,实战的方式介绍了vue及其周边的技术。本文承接前文,不断通过项目迭代的方式继续分享vue相关的知识。

目前Vue实战系列文章已形成了目录,各位感兴趣的朋友欢迎浏览:Vue实战目录——vue+router+vuex+axios从零实现新闻详情页

本项目git地址:

https://gitee.com/vuejslearn/news-list.git

打开项目,点击新闻列表的标题,窗口切换到了新闻详情,但是如果我想回去的话,还得点击导航栏,比较麻烦,有没有可能打开一个新窗口来展示新闻详情呢?这样我再看列表就会更加方便了。答案是有的,打开文件newsList.vue修改goDetail函数:

54d6d3398ed23c78229b11d9efad6d2d.png

具体的代码:

let routerUrl = this.$router.resolve({ path: '/detail', query: { content: content } }) window.open(routerUrl.href, '_blank')

短短几行代码就让我们的本页切换,变成了新窗口打开了。其实背后的方式就是用router获取url,然后通过window自带的方法打开而已。

ok,我们启动项目,点击新闻列表的标题,成功调转,但是,怎么跳转到登录页了?不应该跳到新闻详情吗?什么情况?

仔细想一想,如果我打开一个新窗口,那么这个新窗口里的组件就需要重新创建并挂载,那么原来的vuex里的状态是不是就重置啦?因此,就跳到登录页了。如果想成功跳转,就必须让登录状态能夸窗口,那怎么办呢?如果将状态保存到本地,像cookie那样,是不是就可以了?那该怎么做呢?很简单,用:

localStorage.setItem(key,value)

保存就行啦,一行代码,就可以将数据保存到本地啦。如果读取的话就用:

localStorage.getItem(key)

就可以从本地读取了,是不是很简单?ok,开始改造vuex,将状态改成本地存储:

修改login.vue的登录函数,添加保存本地代码:

c3778d0c199afecc75e0858b6000d7a8.png

修改导航路由文件的全局前置守卫,将由vuex判断登录状态改为从本地获取:

c41234696700d1f37692fa6c422ee14f.png

然后去掉store的引入,重启项目,发现,成功的跳转到详情页了。但是这个导航栏,怎么看着那么的难看呢,我们优化一下导航栏吧。

1.在views里新建Header.vue文件。这里介绍一下vue的文件命名,如果是一个单词的文件,必须要大写开头,比如header.vue就是错的,因为小写字母会被vue当成系统标签。如果是多单词文件,比如:BaseHeader.vue,要采用驼峰法命名,使用的时候可以是这样子用。

2.将App.vue里的导航div模块,放到Header.vue里,同时把样式代码也拿过去。然后去掉Home、About、newAbout这些没用的导航。最后的样子:

58bd6daf9f56ec44cacaf864c59ec36b.png

Header.vue

54bcc429fc4a830e50b8ecd49ea1237b.png

App.vue

修改导航文件,去掉Home、About、newAbout等导航,修改默认导航为新闻列表。最后重启项目:

067ff3d97d76d814fb18712451bc49d2.png

点击其中的新闻标题,跳转到了新闻详情窗口:

bbb6753f560e576c241352daccc1d6f4.png

OK,本文暂时介绍到这里。相关代码以提交到git上,感兴趣的朋友可以拉下代码看一下,亲自运行一下。


原创不容易,鉴于本人水平有限,文中如有错误之处欢迎大家指正。以后我会持续发布vue实战系列的文章,喜欢的朋友欢迎关注。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/527598.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

php 有子目录,php列出目录中所有子目录的实现代码

/*** 取出指定目录的所有子目录* edit: www.jbxue.com* 2013/10/9*/function listdir($dir){if ($handle opendir($dir)){$output array();while (false ! ($item readdir($handle))){if (is_dir($dir./.$item) and $item ! "." and $item ! ".."){$out…

python转cpp_python转c工具

广告关闭 腾讯云11.11云上盛惠 ,精选热门产品助力上云,云服务器首年88元起,买的越多返的越多,最高返5000元! compute.proto # python_out目录指定 xxxx_pb2.py的输出路径,我们指定为. 当前路径# grpc_pytho…

php 变量 换行,php去除换行符的方法小结(PHP_EOL变量的使用)_PHP教程

一个小小的换行,其实在不同的平台有着不同的实现,为什么要这样,可以是世界是多样的。本来在unix世界换行就用/n来代替,但是windows为了体现他的不同,就用/r/n,更有意思的是在mac中用/r。因此unix系列用 /n&…

80端口为什么要备案_搞网站的你,不了解一下共享虚拟主机和备案问题

正文共:1474字 14图,预估阅读时间:4 分钟今天分享的这一切要从域名备案说起。先科普一下,平时我们访问网站都是用域名访问的,通过DNS服务器将域名解析为IP地址(你知道上网时输入的URL是怎么解析成IP地址的吗&#xff1…

订阅号 笔记记录开发 php,微信订阅号开发笔记(五)

1、用户管理//查询所有分组public function queryGroups(){$url "https://api.weixin.qq.com/cgi-bin/groups/get?access_token";$url.$this->getacctoken();$result $this->cget($url);header("Content-type: text/html; charsetutf-8");print_r…

jqprint获取打印页数_高年级应用题40道,假期快给孩子打印练习吧!(含答案)...

1.王爷爷家养的4头奶牛每个星期产奶896千克,平均1头奶牛每天产多少奶呢?2.4辆汽车3次运水泥960袋,平均每辆汽车每次运水泥多少袋?3.水波小学每间教室有3个窗户,每个窗户安装12块玻璃,9间教室一共安装多少块…

cstring移除指定字符串_从String中移除空白字符的多种方式!?差别竟然这么大!...

作者 | Hollis来源 | Hollis字符串,是Java中最常用的一个数据类型了。我们在日常开发时候会经常使用字符串做很多的操作。比如字符串的拼接、截断、替换等。这一篇文章,我们介绍一个比较常见又容易被忽略的一个操作,那就是移除字符串中的空格…

php angular使用,如何使用angular.js PHP从mysql显示数据?

您好,您可以查看以下示例代码你的HTML页面:AngularJs Post Example: DevZone.co.in #dv1{border:1px solid #DBDCE9; margin-left:auto;margin-right:auto;width:220px;border-radius:7px;padding: 25px;}.info{border: 1px solid;margin: 10px 0px;padding:10px;co…

php业务的适用场景,根据业务场景寻找合适解决方案(PHP)?

系统环境:LinuxPHP 7.3ThinkPHP 6先说一下业务场景:订单创建成功之后,每一笔订单都需要进行统计及其他业务处理。如何及时发现处理失败的订单,然后进行补单处理。订单所产生佣金的处理。要解决以上问题,最简单的办法就…

matlab 遗传优化算法_转载 | 遗传算法解决TSP问题的MATLAB实现

问题定义:巡回旅行商问题给定一组n个城市和俩俩之间的直达距离,寻找一条闭合的旅程,使得每个城市刚好经过一次且总的旅行距离最短。TSP问题也称为货郎担问题,是一个古老的问题。最早可以追溯到1759年Euler提出的骑士旅行的问题。1…

php 如何配置 redis,php 如何设置redis

php设置redis的方法:首先安装redis服务及PHP redis驱动;然后打开php.ini文件;接着增加内容为“extensionredis.so”;最后重启php-fpm或apache即可。PHP 设置使用 Redis安装开始在 PHP 中使用 Redis 前, 我们需要确保已…

java数组有跨类建立对象_Java性能优化的45个细节(珍藏版)

点击上面 蓝色字体关注我们技术 / 架构 / 职场 / 面试 关注即送:4000G 架构师视频来源:http://t.cn/EiP42VF在JAVA程序中,性能问题的大部分原因并不在于JAVA语言,而是程序本身。养成良好的编码习惯非常重要,能够显著地…

java 数据纠错,纠错码简介

纠错码是个什么东西引出网络中的通信基于TCP和UDP两个通信协议, 这大家都知道的, 什么TCP的三次握手等等, 面试经常被问到. 三次握手是为了保证连接的正确建立. 但是, 在通信的时候, 你如何保证你的消息正确送达了呢? 有人说了, 有收到请求的响应包. 但我说的不是这个,比如说,…

dataframe修改数据_数据处理进阶pandas入门(一)

前言NumPy作为数据处理的利器,在对数据进行科学计算、存储处理大型矩阵等方面为我们带来了极大的方便,但对于更进一步的数据分析任务,文件操作等方面显得有些吃力。于是,作为NumPy的进阶库pandas应运而生,在实际应用中…

java6个人抽奖抽三个人,基于Java的抽奖逻辑

小组在做一个抽奖系统,现在给我分配到了抽奖逻辑这方面的实现。EMMM,拿到分配的时候是懵B的。老大给的需求图给的关键表结构DROP TABLE IF EXISTS dd_annual_meeting_check;CREATE TABLE dd_annual_meeting_check (check_id int(255) NOT NULL AUTO_INCR…

python自动化教程_Python 任务自动化工具 tox 教程

1、tox 能做什么? 细分的用途包括: 创建开发环境 运行静态代码分析与测试工具 自动化构建包 针对 tox 构建的软件包运行测试 检查软件包是否能在不同的 Python 版本/解释器中顺利安装 统一持续集成(CI)和基于命令行的测试 创建和部…

简单的python画图代码_python opencv如何实现简易画图板 python opencv实现简易画图板代码...

python opencv如何实现简易画图板?本篇文章小编给大家分享一下python opencv实现简易画图板代码,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看。 代码如下: # -*- coding: utf-8 -*- "…

php 添加inotify扩展,php inotify 扩展的安装

一、安装1) 从内核和目录里面查看是否支持inotify[rootnfs01 ~]# uname -r2.6.32-573.el6.x86_64[rootnfs01 ~]#** ls -l /proc/sys/fs/inotify/** -→主要查看下面有没有三个目录总用量 0-rw-r--r-- 1 root root 0 1月 21 13:03 max_queued_events-rw-r--r-- 1 root root…

简述python执行原理_Python程序的执行原理(1)(2)

Python程序的执行原理(1)(2) 1. 过程概述 Python先把代码(.py文件)编译成字节码,交给字节码虚拟机,然后虚拟机一条一条执行字节码指令,从而完成程序的执行。 2. 字节码 字节码在Python虚拟机程序…

matlab求RMSECV,CARS 用于matlab模式识别(分类和回归)的特征变量提取方法 联合开发网 - pudn.com...

CARS所属分类:Windows编程开发工具:matlab文件大小:3605KB下载次数:56上传日期:2018-07-01 12:19:16上 传 者:寒121说明: 用于matlab模式识别(分类和回归)的特征变量提取方法,竞争性…