vue-router的参数传递

vue-router传递参数分为两大类

• 编程式的导航 router.push
• 声明式的导航 <router-link>

- 声明式的导航 <router-link>

一、用name传递参数
1.在路由文件src/router/index.js里配置name属性

routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    }

2.模板里(src/App.vue)用$route.name的形势接收，比如直接在模板中显示：

<p>{{ $route.name}}</p>

二、通过<router-link> 标签中的to传参
其实我们多数传参是不用name进行传参的，我们用<router-link>标签中的to属性进行传参，需要您注意的是这里的to要进行一个绑定，写成:to

<router-link :to="{name:xxx,params:{key:value}}">valueString</router-link>

这里的to前边是带冒号的，然后后边跟的是一个对象形势的字符串.

• name：就是我们在路由配置文件中起的name值。
• params：就是我们要传的参数，它也是对象形式，在对象里可以传递多个值。

了解基本的语法后，我们改造一下我们的src/App.vue里的<router-link>标签,我们把hi1页面的<router-link>进行修改。

<!--命名路由-->
<router-link :to="{name:'hi1',params:{username:'jspang'}}">Hi页面1</router-link>
<!--查询参数-->
<router-link :to="{ path: '/news', query: { userId: 1111}}">click to news page</router-link>

把src/reouter/index.js文件里给hi1配置的路由起个name,就叫hi1.

{path:'/hi1',name:'hi1',component:Hi1},

最后在模板里(src/components/Hi1.vue)用$route.params.username进行接收.

{{$route.params.username}}

1.命名路由搭配params，刷新页面参数会丢失
2.查询参数搭配query，刷新页面数据不会丢失
3.接受参数使用this.$router后面就是搭配路由的名称就能获取到参数的值

三.按照平时的?参数的方式

<li><router-link to="/user/regist?name=alice&pwd=456">用户注册</router-link></li>

	//2.配置路由
	const routes=[
		{
			path:'/user',
			component:User,
			children:[
				{
					path:'regist',
					component:Regist
				}
			]
		}
	];

通过$route.query获取参数

//获取参数
var Regist={
	template:'<h4>用户注册中。。。。获取参数：{{$route.query}}</h4>'
}

四.通过to="/user/login/参数1/参数2"传参

<li><router-link to="/user/login/tom/123">用户登陆</router-link></li>

//2.配置路由
	const routes=[
		{
			path:'/user',
			component:User,
			children:[
				{
					path:'login/:username/:password',
					component:Login
				}
			]
		}
	];

通过$route.params接收参数

//接收参数
var Login={
	template:'<h4>用户登陆中。。。。获取参数：{{$route.params}}</h4>'
}

五.props 传 params
在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。

使用 props 将组件和路由解耦：
通过 props 的方式，实现了解耦，可以在其他地方使用组件，只需要传 props 即可。
使用 props 将组件和路由解耦：

取代与 $route 的耦合

onst User = {
  template: '<div>User {{ $route.params.id }}</div>'
}
const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
})

通过 props 解耦

const User = {
  props: ['id'],
  template: '<div>User {{ id }}</div>'
}
const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User, props: true },

    // 对于包含命名视图的路由，你必须分别为每个命名视图添加 `props` 选项：
    {
      path: '/user/:id',
      components: { default: User, sidebar: Sidebar },
      props: { default: true, sidebar: false }
    }
  ]
})

props 指定值

// client/config/routes.js
export default [
  {
    path: '/app/:id', 
    props: {
      id: '456' 
    },
    component: Todo,
  }
]

props 函数
通过 query 指定 id

// client/config/routes.js
export default [
  {
    path: '/app/:id', 
    props: (route) => ({ id: route.query.id }) // 通过 query 指定 id
    component: Todo,
  }
]

编程式的导航 router.push

1.query方式传参和接收参数

//query传参，使用path跳转
this.$router.push({
    path:'second',
    query: {
        queryId:'20180822',
        queryName: 'query'
    }
})

//query传参接收
this.queryName = this.$route.query.queryName;
this.queryId = this.$route.query.queryId;

注意:传参是this.$router,接收参数是this.$route,这里千万要看清了！！！

2.params方式传参和接收参数

//params传参 使用name
this.$router.push({
  name:'second',
  params: {
    id:'20180822',
     name: 'query'
  }
})

//params接收参数
this.id = this.$route.params.id ;
this.name = this.$route.params.name ;

//路由

{
path: '/second/:id/:name',
name: 'second',
component: () => import('@/view/second')
}

特别注意：命名路由这种方式传递的参数，如果在目标页面刷新是会出错的,如果没有在路由中声明参数，那么参数不会在地址栏出现，但是刷新页面就会导致获取不到参数
原因：params是路由的一部分,必须要在路由后面添加参数名。query是拼接在url后面的参数，没有也没关系。
params一旦设置在路由，params就是路由的一部分，如果这个路由有params传参，但是在跳转的时候没有传这个参数，会导致跳转失败或者页面会没有内容。

解决：如果路由后面没有 /:id/:name，地址栏没有参数 ，如果你刷新一下，就会发现页面失败，所以我们必须在路由后面加上 /:id/:name

注意:params传参，push里面只能是name:'xxxx',不能是path:'/xxx',因为params只能用name来引入路由，如果这里写成了path，接收参数页面会是undefined！！！和name配对的是params，和path配对的是query
二者还有点区别，query相当于get请求，页面跳转的时候，可以在地址栏看到请求参数，而params相当于post请求，参数不会再地址栏中显示。

3. 直接调用$router.push 实现携带参数的跳转

   this.$router.push({
      path: `/describe/${id}`,
   })

 {
     path: '/describe/:id',
     name: 'Describe',
     component: Describe
   }

很显然，需要在path中添加/:id来对应 $router.push 中path携带的参数。在子组件中可以使用来获取传递的参数值。

this.$route.params.id