vue 函数路由跳转_vue路由跳转的方式

vue路由跳转有四种方式

1. router-link

2. this.$router.push() (函数里面调用)

3. this.$router.replace() (用法同push)

4. this.$router.go(n)

一、不带参

1.1 router-link

//name,path都行, 建议用name

// 注意：router-link中链接如果是'/'开始就是从根路由开始，如果开始不带'/'，则从当前路由开始。

1.2 this.$router.push()

this.$router.push('/home')this.$router.push({name:'home'})this.$router.push({path:'/home'})

1.3 this.$router.replace() (用法同push)

二、带参

2.1 router-link

// params传参数 (类似post)

// 路由配置 path: "/home/:id" 或者 path: "/home:id"

// 不配置path ,第一次可请求,刷新页面id会消失

// 配置path,刷新页面id会保留

// html 取参 $route.params.id

// script 取参 this.$route.params.id// query传参数 (类似get,url后面会显示参数)

// 路由可不配置

// html 取参 $route.query.id

// script 取参 this.$route.query.id

2.2 this.$router.push(query传参

this.$router.push({name:'home',query: {id:'1'}})this.$router.push({path:'/home',query: {id:'1'}})//html 取参 $route.query.id//script 取参 this.$route.query.id

params传参this.$router.push({name:'home',params: {id:'1'}}) //只能用 name

//路由配置 path: "/home/:id" 或者 path: "/home:id" ,//不配置path ,第一次可请求,刷新页面id会消失//配置path,刷新页面id会保留

//html 取参 $route.params.id//script 取参 this.$route.params.id

2.3 this.$router.replace() (用法同push)

this.$router.go(n)

this.$router.go(n) this.$router.go(n) 向前或者向后跳转n个页面，n可为正整数或负整数

区别：

this.$router.push 跳转到指定url路径，并想history栈中添加一个记录，点击后退会返回到上一个页面

this.$router.replace 跳转到指定url路径，但是history栈中不会有记录，点击返回会跳转到上上个页面 (就是直接替换了当前页面)

this.$router.go(n) 向前或者向后跳转n个页面，n可为正整数或负整数

vue 函数路由跳转_vue路由跳转的方式相关推荐

vue 函数路由跳转_vue路由的钩子函数和跳转
首页可以控制导航跳转,beforeEach,afterEach等,一般用于页面title的修改.一些需要登录才能调整页面的重定向功能. beforeEach主要有3个参数to,from,next. t ...
hach vue 跳转_Vue路由实现、路由导航、路由模式
1.$router和$route区别 router为VueRouter的实例,相当于一个全局的路由器对象,里面含有很多属性和子对象,例如history对象,和router-link跳转一样,this. ...
vue 定义全局弹框_VUE路由拦截：Vue自定义全局弹窗组件
前言在任何一个平台中,如果需要增加用户黏度,除了用户需要的基本内容外,用户登录注册提交信息也是非常重要的一环,可以了解用户基本信息,用户喜欢等. 抛出前后端混合开发外,vue可以轻松的实现路由拦截. ...
代码跳转路由报错_vue路由报错Navigating to current location (/login) is not allowed踩坑总结...
.在我添加"未登录"判断后,想自动跳转到登录页.但是遇到了问题: Navigating to current location ("/login") is no ...
id vue2路由传参_vue 路由跳转传参
正常跳转 this.$router.push('/index'); 1带参 toOrderDetail() { let orderUuid = this.order.uuid; this.$route ...
vue里面怎么实现页面跳转_vue页面跳转如何实现 vue页面跳转实现代码
vue页面跳转如何实现?本篇文章小编给大家分享一下vue页面跳转实现代码,文章代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看. 一.this.$router. ...
vue 给取data值_vue获取data值的方式分析
上一篇文章我们简单讲解了data初始化的两种方式,这次我们分析一下获取data内值的方式获取vue的data 我们常用获取data值的方式为如下两种: this.$data.link this.li ...
vue 记录滚动位置_vue 路由跳转记住滚动位置，返回时回到上次滚动位置
方法一: 利用Keep-Alive和监听器 1.首先在路由中引入需要的模块 { path: '/scrollDemo', name: 'scrollDemo', meta: { keepAlive:t ...
多个vue项目之间跳转_Vue六，路由，ElementUI
内容大纲安装路由配置路由路由对象router:页面跳转,传递参数 ElementUI 知乎视频www.zhihu.com 前端项目笔记为什么要在linex中开发? 1.公司服务器是line ...

vue 函数路由跳转_vue路由跳转的方式

vue 函数路由跳转_vue路由跳转的方式相关推荐

最新文章

热门文章

vue 函数 路由跳转_vue路由跳转的方式

vue 函数 路由跳转_vue路由跳转的方式相关推荐

最新文章

热门文章

vue 函数路由跳转_vue路由跳转的方式

vue 函数路由跳转_vue路由跳转的方式相关推荐