vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue路由跳转传参或打开新页面跳转

Vue路由跳转传参或者打开新页面跳转问题

作者:小火车况且况且

这篇文章主要介绍了Vue路由跳转传参或者打开新页面跳转问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

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

1. 通过路由中的name属性 

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

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

// 传递参数
this.$router.push({
	name: "首页",
	params: {
		code: 1
	}
})
// 获取参数
this.$route.params

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

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

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

// 传递参数
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获取参数

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

vue的跳转(打开新页面)

router-link跳转

   // 直接写上跳转的地址
  <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跳转

toDeail (e) {
   this.$router.push({path: "/detail", query: {id: e}})
 }
 // 参数获取
 id = this.$route.query.id
 
 toDeail (e) {
   this.$router.push({name: "/detail", params: {id: e}})
 }
 // 注意地址需写在 name后面
 //参数获取,params和query区别,query参数在地址栏显示,params的参数不在地址栏显示
 id = this.$route.params.id

resolve跳转

    //resolve页面跳转可用新页面打开
    //2.1.0版本后,使用路由对象的resolve方法解析路由,可以得到location、router、href等目标路由的信息。得到href就可以使用window.open开新窗口了
 toDeail (e) {
   const new = this.$router.resolve({name: '/detail', params: {id: e}})
   window.open(new.href,'_blank')
 }

window.open()

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

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

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

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

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

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

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

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

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文