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

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

1. 通过路由中的name属性, 使用params传递参数, 使用this.$route.params获取参数

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

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

通过结合VueRouter的路由, 可以将传递的参数显示在url地址栏中, 官方的说明: 在 Vue Router 中，我们可以在路径中使用一个动态字段来实现，我们称之为 路径参数
带参数的动态路由匹配

routes: [
   // 动态路径参数 以冒号开头
   { path: '/user/:id', component: User }
 ]

const userId = '123'
router.push({ name: 'user', params: { userId }}) // -> /user/123 这里参数就展示到了url上
router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user

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的区别

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

3.2 $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');