vue路由跳转

1.路由的query参数

 <!-- 跳转并携带query参数，to的字符串写法   跳转的是path路径-->
   <router-link :to="/home/message/detail?id=666&title=你好">跳转</router-link>

<!-- 跳转并携带query参数，to的对象写法 -->
   <router-link 
   	:to="{
   		path:'/home/message/detail',
   		query:{
   		   id:666,
               title:'你好'
   		}
   	}"
   >跳转</router-link>

1-1接收参数

2. 接收参数：

   ```js
   this.$route.query.id
   this.$route.query.title

2.命名路由

作用：可以简化路由的跳转。

   1. 给路由命名：

      ```js
      {
      	path:'/demo',
      	component:Demo,
      	children:[
      		{
      			path:'test',
      			component:Test,
      			children:[
      				{
                        name:'hello' //给路由命名
      					path:'welcome',
      					component:Hello,
      				}
      			]
      		}
      	]
      }

2-1：命名路由如何跳转和传参

  <!--简化前，需要写完整的路径 会在地址栏拼接参数的 -->
      <router-link to="/demo/test/welcome">跳转</router-link>
      
      <!--简化后，直接通过名字跳转 -->
      <router-link :to="{name:'hello'}">跳转</router-link>
      
      <!--简化写法配合传递参数 -->
      <router-link 
      	:to="{
      		name:'hello',
      		query:{
      		   id:666,
                  title:'你好'
      		}
      	}"
      >跳转</router-link>

3.路由的params参数

{
   	path:'/home',
   	component:Home,
   	children:[
   		{
   			path:'news',
   			component:News
   		},
   		{
   			component:Message,
   			children:[
   				{
   					name:'xiangqing',
   					path:'detail/:id/:title', //使用占位符声明接收params参数
   					component:Detail
   				}
   			]
   		}
   	]
   }

3-1:params跳转传递参数(字符串拼接) ：to字符串拼接的时候必须使用路由占位符( path:‘detail/:id/:title’)

<!-- 跳转并携带params参数，to的字符串写法 -->
   <router-link :to="/home/message/detail/666/你好">跳转</router-link>

3-1-1.params跳转接收参数(使用路由占位符的时候才可以下面方法)：

this.$route.params.id
this.$route.params.title

3-2:params跳转传递参数(：to对象)

 <!-- 跳转并携带params参数，to的对象写法 -->
   <router-link 
   	:to="{
   		name:'xiangqing',
   		params:{
   		   id:666,
               title:'你好'
   		}
   	}"
   >跳转</router-link>

3-2-1.params跳转接收参数（:to对象）：

this.$route.params.id
this.$route.params.title

3-3.props接收参数

<!-- 跳转并携带params参数，to的字符串写法 -->
   <router-link :to="/home/message/detail/666/你好">跳转</router-link>

{
   	path:'/home',
   	component:Home,
   	children:[
   		{
   			path:'news',
   			component:News
   		},
   		{
   			component:Message,
   			children:[
   				{
   					name:'xiangqing',
   					path:'detail/:id/:title', //使用占位符声明接收params参数
   					props:true,
   					component:Detail
   				}
   			]
   		}
   	]
   }

3-3-1.props接收参数接收：

 props:["id"],

3-4.props接收参数

<!-- 跳转并携带params参数，to的字符串写法 -->
   <router-link 
   	:to="{
   		name:'xiangqing',
   		params:{
   		   id:666,
               title:'你好'
   		}
   	}"
   >跳转</router-link>

{
   	path:'/home',
   	component:Home,
   	children:[
   		{
   			path:'news',
   			component:News
   		},
   		{
   			component:Message,
   			children:[
   				{
   					name:'xiangqing',
   					path:'detail', //使用占位符声明接收params参数
   					props:true,
   					component:Detail
   				}
   			]
   		}
   	]
   }

3-4-1.props接收参数接收：

 props:["id"],
 这样照样可以：  {{$route.params.id}}

特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！