参考:(56条消息) router-link中传值的三种方式_router-link互相传值_塵心的博客-CSDN博客

(56条消息) Vue 之 路由跳转传参方式详解【最全实用总结】_八了个戒的博客-CSDN博客

路由跳转

Vue 中路由跳转主要分为两种方式:

  1. 声明式路由导航【<router-link>】

  2. 编程式路由导航【js的方式——$router.push(…)】

一、声明式路由导航router-link传值的三种方式

1、【router/index.js】里面的路由规则的路径-有无别名?

// 第一种 :to + name
<router-link :to="{name: 'home' }" > </router-link>

// 第二种 :to + path
<router-link :to="{path: '/home'}" > </router-link>

// 第三种 to + path
 <router-link to="/home"></router-link>

// name, path都行, 建议用name --------------------------
<router-link :to="{name: 'home'}" tag='li'> </router-link>
注意:
  1. <router-link> 中链接如果是 / 开始就是从根路由开始,如果开始不带 /,则从当前路由开始。
  2. <router-link> 会默认解析成 a 标签,可以通过 tag 属性指定它解析成其他标签

2、传参-有无冒号?

        查询参数传参query
//1、查询参数传参query(查询)
// (类似get, url后面会显示参数)
<router-link :to="{name: 'home', query: {id:1}}"> 
<router-link to="/hometown?id=1&key='value'"> 

// 路由可不配置
html取参: $route.query.id
script取参: this.$route.query.id

      动态路由传参params
// 2、动态路由传参(常用于传递单个参数)
//params:参数 (类似post 提交)

<router-link :to="{name: 'home', params: {id:1}}"> 
<router-link to="/hometown/1"> 


// [index.js]路由配置path: "/home/:id" 或者 path: "/home:id" 
// 配置path: 刷新页面id会保留(!)
// 不配置path: 第一次可请求, 刷新页面id会消失
html取参: $route.params.id
script取参: this.$route.params.id

二、编程式路由导航

1-$router.push(…)

点击路由链接,跳转到新的页面,可以返回到当前路由界面

 1、有无name?

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

2、有无冒号?

//1\ 查询参数传参 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


//2\ 动态路由传参 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

query 和 params 区别

  • query 类似 get,跳转之后页面 url 后面会拼接参数,类似 ?id=1,非重要性的可以这样传,密码之类还是用 params 刷新页面 id 还在;
  • params 类似 post,跳转之后页面 url 后面不会拼接参数,但是刷新页面 id 会消失
     

2- this.$router.replace()

用新路由替换当前路由,不可以返回到当前路由界面

具体使用方式同上 this.$router.push()

3. this.$router.back()

请求(返回)上一个记录路由

4. this.$router.go(n)

向前或者向后跳转n个页面,n可为正整数或负整数

// 请求(返回)上一个记录路由
this.$router.go(-1)
// 请求下一个记录路由
this.$router.go(1)

Logo

前往低代码交流专区

更多推荐