Vue路由跳转传参或打开新页面跳转(vue页面路由传参)

推荐整理分享Vue路由跳转传参或打开新页面跳转(vue页面路由传参)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue路由跳转传参 参数不显示在url 且刷新不清除,vue路由跳转传参的三种方式,vue路由跳转传参 参数不显示在url 且刷新不清除,vue路由跳转参数丢失,vue路由跳转传参数页面不更新,vue路由跳转传参的三种方式,vue路由跳转传参 参数不显示在url 且刷新不清除,vue路由跳转传参数,内容如对您有帮助，希望把文章链接给更多的朋友！

使用params传递参数, 使用this.$route.params获取参数

这种方式传递相当于post请求, 传递的数据不会显示在url地址栏,但是页面刷新,参数会丢失

1

2

3

4

5

6

7

8

9

// 传递参数

this.$router.push({

    name: "首页",

    params: {

        code: 1

    }

})

// 获取参数

this.$route.params

 2. 通过路由属性中的path属性 

使用query传递参数, 使用this.$route.query获取参数

这种方式相当于get请求, 传递的参数会显示在url地址栏, 页面刷新,参数还保留在url上面

1

2

3

4

5

6

7

8

9

// 传递参数

this.$router.push({

    path: "/dashboard",

    query: {

        code: 1

    }

})

// 获取参数

this.$route.query

在获取传递参数的时候都是使用this.$route

 3. $router 和 $route的区别

$router 可以看到$router是全局路由VueRouter实例

$route是存放路由信息的一个对象, 传递的数据都是存放在$route中

4. 在Vue项目中点击跳转打开一个新的页面

使用this.$router.resolve({path: "/login"})可以获取到指定的路由的信息

使用window.open(routeData.href, '_blank')在新窗口中打开指定的路由页面

query:{code: 1}传递参数, 但是可以在url地址栏中看到传递的参数

通过this.$route.query获取参数

1

2

let routeData = this.$router.resolve({ path: '/login',query: {loginName}});

window.open(routeData.href, '_blank');

 vue的跳转（打开新页面）

1

2

3

4

5

6

7

8

9

10

11

12

   // 直接写上跳转的地址

  <router-link to="/detail/one">

    <span class="spanfour" >link跳转</span>

  </router-link>

  // 添加参数

  <router-link :to="{path:'/detail/two', query:{id:1，name:'vue'}}">

   </router-link>

  // 参数获取

  id = this.$route.query.id

  // 新窗口打开

  <router-link :to="{path:'/detail/three', query:{id:1，name:'vue'}}" target="_blank">

  </router-link>

this.$router.push/replace跳转 

 resolve跳转

 window.open()

1. 在当前窗口打开百度,并且使URL地址出现在搜索栏中.

1

2

window.open("http://www.baidu.com/", "_search");

window.open("http://www.baidu.com/", "_self");

2. 在一个新的窗口打开百度

1

window.open("http://www.baidu.com/", "_blank");

3. 打开一个新的窗口,并命名为"hello"

1

window.open("", "hello");

另外, open函数的第二个参数还有几种选择：

如果还要添加其它的东西在新的窗口上, 则需要第三个参数：