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中的跳转的更多相关文章

  1. Vue Cli 中使用 Karma / Chrome 执行样式相关单元测试

    在 GearCase 开源项目 中,我使用了 Vue Cli 的默认测试框架.因此和样式相关的东西,都无法进行测试.因为它并不类似于无头浏览器,而是存在于虚拟内存之中. 现状 在如下 button.s ...

  2. vue cli 中关于vue.config.js中chainWebpack的配置

    Vue CLI  的官方文档上写:调整webpack配置最简单的方式就是在vue.config.js中的configureWebpack选项提供一个对象. Vue CLI 内部的 webpack 配置 ...

  3. vue cli中的env详解

    前言 相信使用过 vueCli 开发项目的小伙伴有点郁闷,正常开发时会有三个接口环境(开发,测试,正式),但是 vueCli 只提供了两种 development,production(不包含 tes ...

  4. Vue-axios 在vue cli中封装

    common/post.js import axios from 'axios' // 引入axios import qs from 'qs' // 引入qs axios.defaults.baseU ...

  5. vue.cli 中使用 less 来写css样式

    vue-cli 的webpack中已配置了less,但 package.json 中没有选项,为了方便开发中使用,需安装一下: 安装方式一: npm install less less-loader ...

  6. scss是什么?在vue.cli中的安装使用步骤是?有哪几大特性?

    css的预编译: 使用步骤: 第一步:用npm下三个loader(sass-loader.css-loader.node-sass): 第二步:在build目录找到webpack.base.confi ...

  7. Vue CLI 是如何实现的 -- 终端命令行工具篇

    Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供了终端命令行工具.零配置脚手架.插件体系.图形化管理界面等.本文暂且只分析项目初始化部分,也就是终端命令行工具的实现. 0. 用法 ...

  8. vue项目中跳转到外部链接方法

    当我们在文件中,如果是vue页面中的内部跳转,可以用this.$router.push()实现,但是如果我们还用这种方法跳到外部链接,就会报错,我们一看链接的路径,原来是我们的外部链接前面加上了htt ...

  9. Vue.js中,如何自己维护路由跳转记录?

    在Vue的项目中,如果我们想要做返回.回退操作时,一般会调用router.go(n)这个api,但是实际操作中,使用这个api有风险,就是会让用户跳出当前应用,因为它记录的是浏览器的访问记录,而不是你 ...

  10. Vue CLI 3 中文文档

    翻译文档 文档翻译全貌 前言 之前写了一篇Vue CLI 3.x 版本的简单体验,当时文档还不全,具体的使用方法并不是很清楚,大概是2月7号,收到Vue CLI 3接近Beta版的提示,作者尤雨溪也讲 ...

随机推荐

  1. [0]尝试用Unity3d制作一个王者荣耀(持续更新)->游戏规划

    太得闲了于是想写个农药,虽然可能会失败但是还是要试一试. 因为是自学的不是Unity专业的可能表达语言会有些不标准!望见谅! 结构: 以组件式(比如说摇杆控制和玩家部分的编写是分离的,可以自由拼装)作 ...

  2. Netty源码分析 (九)----- 拆包器的奥秘

    Netty 的解码器有很多种,比如基于长度的,基于分割符的,私有协议的.但是,总体的思路都是一致的. 拆包思路:当数据满足了 解码条件时,将其拆开.放到数组.然后发送到业务 handler 处理. 半 ...

  3. 字符串之————三向字符串快速排序(Quick3string)

    上一篇介绍了字符串的两种经典排序方法(LSD MSD): https://www.cnblogs.com/Unicron/p/11531111.html 下面我们来介绍一种通用的字符串排序方法——三向 ...

  4. 42 (OC)* 字典实现原理--哈希原理

    一.NSDictionary使用原理 1.NSDictionary(字典)是使用 hash表来实现key和value之间的映射和存储的,hash函数设计的好坏影响着数据的查找访问效率. - (void ...

  5. 细谈Redis五大数据类型

    文章原创于公众号:程序猿周先森.本平台不定时更新,喜欢我的文章,欢迎关注我的微信公众号. 上一篇文章有提到,Redis中使用最频繁的有5种数据类型:String.List.Hash.Set.SortS ...

  6. 第六届蓝桥杯java b组第二题

    立方变自身 观察下面的现象,某个数字的立方,按位累加仍然等于自身. 1^3 = 1 8^3 = 512 5+1+2=8 17^3 = 4913 4+9+1+3=17 … 请你计算包括1,8,17在内, ...

  7. 常用的HDFS操作

    首先,把Hadoop命令加入到PATH环境变量中,直接通过start-dfs.sh开启Hadoop,也可以直接通过hdfs命令访问HDFS中的内容,方便平时的操作. 配置PATH环境变量 vim  ~ ...

  8. ZIP压缩和解压字符串

    由于ZIP压缩会产生头信息, 所以当字符串长度没有达到一定规模的时候, 压缩后的长度可能比原来的还长 // 将一个字符串按照zip方式压缩和解压缩 public class ZipUtil { // ...

  9. sql server编写archive通用模板脚本实现自动分批删除数据

    博主做过比较多项目的archive脚本编写,对于这种删除数据的脚本开发,肯定是一开始的话用最简单的一个delete语句,然后由于部分表数据量比较大啊,索引比较多啊,会发现删除数据很慢而且影响系统的正常 ...

  10. js 判断字符串是否存在某个字符串

    可使用String和Regexp对象的相关方法进行处理,如下 一.String对象方法 1.使用indexOf()方法,返回某个指定的字符串值在字符串中首次出现的位置.如果要检索的字符串值没有出现,则 ...