vue2.0路由(跳转和传参)经典介绍
声明式
<router-link :to="...">
编程式
router.push(...)
router.push('home') // 字符串
router.push({ path: 'home' }) // 对象
router.push({ name: 'user', params: { userId: 123 }}) // 命名的路由
router.push({ path: 'register', query: { plan: 'private' }}) // 带查询参数,变成 /register?plan=private
:username
)的键值对信息,如{username: 'paolino'} /foo?user=1
获取到query.user = 1 $route.router 所属路由器以及所属组件信息 router.replace(location)
跟 router.push 很像,唯一的不同就是,它不会向 history 添加新记录,而是跟它的方法名一样 —— 替换掉当前的 history 记录。
声明式
<router-link :to="..." replace>
编程式
router.replace(...)
router.go(n)
router.go(1) // 在浏览器记录中前进一步,等同于 history.forward()
router.go(-1) // 后退一步记录,等同于 history.back()
这两种方式都会把路由导航到 /user/123 路径。
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
router.push({ name: 'user', params: { userId: 123 }})
vue2.0路由(跳转和传参)经典介绍的更多相关文章
- vue 路由跳转,传参
一.直接跳转 //js1.this.$router.push('/ad_new') //html 2.<router-link to="/ad_check"> < ...
- vue 和 react 路由跳转和传参
react 1 .跳转方式加传参 this.props.history.push({ //地址 pathname: '/film/Details', //路由传参 ...
- Angular:路由的配置、传参以及跳转
①路由的配置 1.首先用脚手架新建一个项目,在路由配置时选择yes 2.用ng g component创建组件 3.在src/app/app-routing.module.ts中配置路由 import ...
- vue2.0路由写法、传参和嵌套
前置知识请戳这里 vue-routerCDN地址:https://unpkg.com/vue-router@3.0.1/dist/vue-router.js vue-router下载地址:https: ...
- JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
<script src="jquery.min.js" type="text/javascript"></script> <scr ...
- vue2.0路由
现在用vue-cli搭建的环境里面vue-router是下载好的 vue2.0路由方式和以前也有些不同 没了了map和start方法 目录结构如上图 这里有三个文件,app.vue显示,main.js ...
- (day68)Vue-CLI项目、页面跳转和传参、生命周期钩子
目录 一.Vue-CLI (一)环境搭建 (二)项目的创建 (三)项目目录结构 (四)Vue组件(.vue文件) (五)全局脚本文件main.js(项目入口) (六)Vue请求生命周期 二.页面跳转和 ...
- flutter页面间跳转和传参-Navigator的使用
flutter页面间跳转和传参-Navigator的使用 概述 flutter中的默认导航分成两种,一种是命名的路由,一种是构建路由. 命名路由 这种路由需要一开始现在创建App的时候定义 new M ...
- app之间的跳转和传参问题
app 之间跳转和传参: 首先 创建2个app formApp (需要跳转到另外app的项目) toApp(被跳转的项目) 一:在toApp 项目中的操作: 1:创建URLSchemes ...
- 微信小程序开发:学习笔记[8]——页面跳转及传参
微信小程序开发:学习笔记[8]——页面跳转及传参 页面跳转 一个小程序拥有多个页面,我们可以通过wx.navigateTo推入一个新的页面.在首页使用2次wx.navigateTo后,页面层级会有三层 ...
随机推荐
- NA远程
远程网络按照L1分类: 租用专线(Leased Line):一般采用同步串行链路,使用HDLC/PPP封装: 线路交换(Circuit-Switched):一般采用异步串行链路,使用H ...
- 【Akka】Actor模型探索
Akka是什么 Akka就是为了改变编写高容错性和强可扩展性的并发程序而生的.通过使用Actor模型我们提升了抽象级别,为构建正确的可扩展并发应用提供了一个更好的平台.在容错性方面我们採取了" ...
- 小白学开发(iOS)OC_ 字符串的获取 (2015-08-11)
// // main.m // 字符串的获取 // // Created by admin on 15/8/13. // Copyright (c) 2015年 admin. All righ ...
- git fetch 和 git pull 的差别
Git中从远程的分支获取最新的版本号到本地有这样2个命令: 1. git fetch:相当于是从远程获取最新版本号到本地,不会自己主动merge git fetch origin master git ...
- 找了两个node+vue-cli+mogodb的小项目学学
实现的博客系统,自己抽时间搭建看看 https://www.cnblogs.com/yesyes/p/7188331.html https://github.com/chaohangz/vueBlog
- 连通分量模板:tarjan: 求割点 && 桥 && 缩点 && 强连通分量 && 双连通分量 && LCA(近期公共祖先)
PS:摘自一不知名的来自大神. 1.割点:若删掉某点后.原连通图分裂为多个子图.则称该点为割点. 2.割点集合:在一个无向连通图中,假设有一个顶点集合,删除这个顶点集合,以及这个集合中全部顶点相关联的 ...
- iOS单例设计模式具体解说(单例设计模式不断完好的过程)
在iOS中有非常多的设计模式,有一本书<Elements of Reusable Object-Oriented Software>(中文名字为<设计模式>)讲述了23种软件设 ...
- 2016/2/19 css样式表 Cascading Style Sheet 叠层样式表 美化HTML网页
一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例:<p style="font-size:14px;">内联 ...
- Delphi中WebBrowser控件打开部分网站报"Invalid floating point operation”解决
Delphi中WebBrowser控件打开部分网站报"Invalid floating point operation”解决 EmbeddedWBWebBrowserDelphi 最近用E ...
- redis集群在window下安装
1.下载安装单机版: https://github.com/MSOpenTech/redis/releases/download/win-3.2.100/Redis-x64-3.2.100.msi ...