Vue界面跳转传递参数

小西小西笑嘻嘻2023-11-03 14:01

界面跳转传递参数

1、push方式传参：

javascript 复制代码

query传参 参数会在链接后面显示
      this.$router.push({
        path: "/home",
        query: { id: 1 },
      });

params传参 参数不会显示在链接后面
      this.$router.push({
        name: "home",
        params: { id: 1 },
      });

tis：

params传参使用name，query传参使用path

注意name的连接不要加上'/'

接收参数：

/this.$route.params

this.$route.query

2、window.href 传参：

javascript 复制代码

window.location.href = '/home/?id='+1;

3、router-link标签跳转传参：

javascript 复制代码

  <router-link :to="{path:'home',query:{id:1}}">跳转</router-link>

4、利用resolve新打开新窗口传参：

javascript 复制代码

  const {href}= this.$router.resolve({
                name:"animation",
                query:{
                    id:1
                }
  });
  window.open(href,"_blank")

路由跳转不刷新

如果在使用Vue路由跳转页面后，页面没有更新，可能是因为缓存原因造成的

1、在路由的配置中引入meta，设置noCache为true：

const router = new VueRouter({
  routes: [
    {
      path: '/home',
      name: 'Home',
      component: Home,
      meta: { noCache: true }
    }
  ]
})

2、在App.vue中加入代码：

<template>
  <div id="app">
    <router-view :key="$route.fullPath" />
  </div>
</template>

加入:key="$route.fullPath"，当路由跳转时，会重新渲染组件。

3、在路由跳转时加上时间戳：

this.$router.push({
  path: '/home',
  query: {
    t: new Date().getTime()
  }
})

在跳转路由时，加上一个时间戳，可以让浏览器强制重新加载页面。