Vue-cli中的跳转
Vue-cli中的跳转
一.页面中跳转指定网页
写法一:
<router-link :to="{name:'home'}">
这里的name是在VUE路由里面的
写法二:
<router-link :to="{path:'/path'}">
注意:router-link中链接如果是'/'开始就是从根路由开始,如果开始不带'/',则从当前路由开始。
二.js中跳转
push与replace用法一样,都是跳转到指定网页
区别
:
- push会history栈中添加一个记录,点击后退会返回到上一个页面
- replacehistory栈中不会有记录,点击返回会跳转到上上个页面
this.$router.push('/path')
this.$router.push({name:'name'})
this.$router.push({path:'/path'})
三.返回
向前或者向后跳转n个页面,n可为正整数或负整数
this.$router.go(n)
四.关于跳转传参
页面
<router-link :to="{name:'name', params: {id:1}}">
// params传参数 (类似post)
// 路由配置 path: "/path/:id" 或者 path: "/path:id"
// 不配置path ,第一次可请求,刷新页面id会消失
// 配置path,刷新页面id会保留
<router-link :to="{name:'name', query: {id:1}}">
// query传参数 (类似get,url后面会显示参数)
// 路由可不配置
// html 取参 $route.query.id
// script 取参 this.$route.query.id
js中
this.$router.push(或者replace)({name:'name',query: {id:'1'}}) //这里name和path都可以
this.$router.push(或者replace)({name:'name',params: {id:'1'}}) // 只能用 name
// 路由配置 path: "/path/:id" 或者 path: "/path:id" ,
// 不配置path ,第一次可请求,刷新页面id会消失
// 配置path,刷新页面id会保留
// html 取参 $route.params.id
// js 取参 this.$route.params.id
Vue-cli中的跳转的更多相关文章
- Vue Cli 中使用 Karma / Chrome 执行样式相关单元测试
在 GearCase 开源项目 中,我使用了 Vue Cli 的默认测试框架.因此和样式相关的东西,都无法进行测试.因为它并不类似于无头浏览器,而是存在于虚拟内存之中. 现状 在如下 button.s ...
- vue cli 中关于vue.config.js中chainWebpack的配置
Vue CLI 的官方文档上写:调整webpack配置最简单的方式就是在vue.config.js中的configureWebpack选项提供一个对象. Vue CLI 内部的 webpack 配置 ...
- vue cli中的env详解
前言 相信使用过 vueCli 开发项目的小伙伴有点郁闷,正常开发时会有三个接口环境(开发,测试,正式),但是 vueCli 只提供了两种 development,production(不包含 tes ...
- Vue-axios 在vue cli中封装
common/post.js import axios from 'axios' // 引入axios import qs from 'qs' // 引入qs axios.defaults.baseU ...
- vue.cli 中使用 less 来写css样式
vue-cli 的webpack中已配置了less,但 package.json 中没有选项,为了方便开发中使用,需安装一下: 安装方式一: npm install less less-loader ...
- scss是什么?在vue.cli中的安装使用步骤是?有哪几大特性?
css的预编译: 使用步骤: 第一步:用npm下三个loader(sass-loader.css-loader.node-sass): 第二步:在build目录找到webpack.base.confi ...
- Vue CLI 是如何实现的 -- 终端命令行工具篇
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供了终端命令行工具.零配置脚手架.插件体系.图形化管理界面等.本文暂且只分析项目初始化部分,也就是终端命令行工具的实现. 0. 用法 ...
- vue项目中跳转到外部链接方法
当我们在文件中,如果是vue页面中的内部跳转,可以用this.$router.push()实现,但是如果我们还用这种方法跳到外部链接,就会报错,我们一看链接的路径,原来是我们的外部链接前面加上了htt ...
- Vue.js中,如何自己维护路由跳转记录?
在Vue的项目中,如果我们想要做返回.回退操作时,一般会调用router.go(n)这个api,但是实际操作中,使用这个api有风险,就是会让用户跳出当前应用,因为它记录的是浏览器的访问记录,而不是你 ...
- Vue CLI 3 中文文档
翻译文档 文档翻译全貌 前言 之前写了一篇Vue CLI 3.x 版本的简单体验,当时文档还不全,具体的使用方法并不是很清楚,大概是2月7号,收到Vue CLI 3接近Beta版的提示,作者尤雨溪也讲 ...
随机推荐
- [0]尝试用Unity3d制作一个王者荣耀(持续更新)->游戏规划
太得闲了于是想写个农药,虽然可能会失败但是还是要试一试. 因为是自学的不是Unity专业的可能表达语言会有些不标准!望见谅! 结构: 以组件式(比如说摇杆控制和玩家部分的编写是分离的,可以自由拼装)作 ...
- Netty源码分析 (九)----- 拆包器的奥秘
Netty 的解码器有很多种,比如基于长度的,基于分割符的,私有协议的.但是,总体的思路都是一致的. 拆包思路:当数据满足了 解码条件时,将其拆开.放到数组.然后发送到业务 handler 处理. 半 ...
- 字符串之————三向字符串快速排序(Quick3string)
上一篇介绍了字符串的两种经典排序方法(LSD MSD): https://www.cnblogs.com/Unicron/p/11531111.html 下面我们来介绍一种通用的字符串排序方法——三向 ...
- 42 (OC)* 字典实现原理--哈希原理
一.NSDictionary使用原理 1.NSDictionary(字典)是使用 hash表来实现key和value之间的映射和存储的,hash函数设计的好坏影响着数据的查找访问效率. - (void ...
- 细谈Redis五大数据类型
文章原创于公众号:程序猿周先森.本平台不定时更新,喜欢我的文章,欢迎关注我的微信公众号. 上一篇文章有提到,Redis中使用最频繁的有5种数据类型:String.List.Hash.Set.SortS ...
- 第六届蓝桥杯java b组第二题
立方变自身 观察下面的现象,某个数字的立方,按位累加仍然等于自身. 1^3 = 1 8^3 = 512 5+1+2=8 17^3 = 4913 4+9+1+3=17 … 请你计算包括1,8,17在内, ...
- 常用的HDFS操作
首先,把Hadoop命令加入到PATH环境变量中,直接通过start-dfs.sh开启Hadoop,也可以直接通过hdfs命令访问HDFS中的内容,方便平时的操作. 配置PATH环境变量 vim ~ ...
- ZIP压缩和解压字符串
由于ZIP压缩会产生头信息, 所以当字符串长度没有达到一定规模的时候, 压缩后的长度可能比原来的还长 // 将一个字符串按照zip方式压缩和解压缩 public class ZipUtil { // ...
- sql server编写archive通用模板脚本实现自动分批删除数据
博主做过比较多项目的archive脚本编写,对于这种删除数据的脚本开发,肯定是一开始的话用最简单的一个delete语句,然后由于部分表数据量比较大啊,索引比较多啊,会发现删除数据很慢而且影响系统的正常 ...
- js 判断字符串是否存在某个字符串
可使用String和Regexp对象的相关方法进行处理,如下 一.String对象方法 1.使用indexOf()方法,返回某个指定的字符串值在字符串中首次出现的位置.如果要检索的字符串值没有出现,则 ...