路由的传参

有两种传参方式，第一种query传参 第二种params传参

query传参
有两种写法 一个是字符串写法直接写在路径中拼接 ？+参数 ，

第二种时对象写法 ，把路径单独写，数据单独写

数据传递根据的是路由路径

<!-- 跳转并携带query参数，to的字符串写法 -->
   <router-link :to="/home/message/detail?id=666&title=你好">跳转</router-link>
   				
   <!-- 跳转并携带query参数，to的对象写法 -->
   <!-- name:'detail' 可以写路由的name 也可以直接写路径 -->
   <router-link 
   	:to="{
   		path:'/home/message/detail',
   		query:{
   		   id:666,
           title:'你好'
   		}
   	}"
   >跳转</router-link>

组件接收数据

用到$route.query

<template>
  <div>
    <h3>信息编号:{{ $route.query.id }}</h3>
    <h3>信息标题:{{ $route.query.title }}</h3>
  </div>
</template>
 
<script>
export default {
  name: "Msgdata",
};
</script>
 
<style>
</style>

当有多个需要传递的参数时,总在模板中写 $route.query, 肯定是不好的,这时候就需要路由中接收并包装一下

还可以在路由设置中进行获取然后再传递到组件 可以用到props,写在组件的路由中

routes:[
   	{
   		path:'/about',
   		component:About,
   	},
   	{
   		path:'/home',
   		component:Home,
   		children:[ //通过children配置子级路由
   			{    
                name:'news'
   				path:'news', //此处一定不要写：/news
   				component:News
   			},
   			{
                name:'message'
   				path:'message',//此处一定不要写：/message
   				component:Message,
                children: [
                     {
                            path: 'msgdata',
                            component: Msgdata,
                        //在这里接收一下传来的参数,然后包装一下再传给组件
                            props($route){
                               return {id:$route.query.id,title:$route.query.title}
                                 }     
   			        }
   		        ]
   	}
   ]

组件接收

<template>
  <div>
    <h3>信息编号:{{ id }}</h3>
    <h3>信息标题:{{ title }}</h3>
  </div>
</template>
 
<script>
export default {
  name: "Msgdata",
  props: ["id", "title"],
};
</script>
 
<style>
</style>

params传参
第一种直接路径传递参数

在路径中直接加 引号内的东西都会当成字符处理,所以给to加上冒号让他解析成表达式,但是表达式没有以斜杠开头的,所以加上` 模板引号 又变成了字符串,然后用${}配合模板字符串。

 <router-link :to="`/home/news/shownews/${n.id}/${n.name}`">
{{ n.name }}
 </router-link> 

第二种方式写成对象形式

第二种方式必须写name不可以用path作为路径

<router-link
          :to="{
            // 用params传递参数时用到他的对象写法中不可使用 path:'路径'
            name: 'shownews',
            params: {
              id: n.id,
              name: n.name,
            },
          }"
        >
          {{ n.name }}
        </router-link>

传递但是，params传递需要路由路径中配置占位符不然不知道哪个是路径哪个是数据

 name: 'shownews',
// params 写法先在路径中占位 路径后面跟上占位符
path: 'shownews/:id/:name',
component: ShowNews,

replace属性
<router-link>的replace属性 不留下操作记录

1. 作用：控制路由跳转时操作浏览器历史记录的模式

2. 浏览器的历史记录有两种写入方式：分别为push和replace，push是追加历史记录，replace是替换当前记录。路由跳转时候默认为push

3. 如何开启replace模式：<router-link replace .......>News</router-link>

面试题
query、params

query、params两个属性可以传递参数
query参数：不属于路径当中的一部分，类似于get请求，地址栏表现为 /search?k1=v1&k2=v2
query参数对应的路由信息 path: “/search”
params参数：属于路径当中的一部分，需要注意，在配置路由的时候，需要占位 ,地址栏表现为 /search/v1/v2
params参数对应的路由信息要修改为path: “/search/:keyword” 这里的/:keyword就是一个params参数的占位符
params传参问题
path不能和params一起使用
（1）、如何指定params参数可传可不传
解决方法：可以通过改变path来指定params参数可传可不传
path: “/search/:keyword?”,?表示该参数可传可不传

2 如果传递的时空串，如何解决 。

this.$router.push(name:"Search",query:keyword:this.keyword,params:keyword{:}^{\prime \prime })出现的问题和1中的问题相同,地址信息少了/search解决方法：加入||undefined，当我们传递的参数为空串时地址栏url也可以保持正常this.$router.push({name:“Search”,query:{keyword:this.keyword},params:{keyword:‘’||undefined}})

路由组件能不能传递props数据？
可以，但是只能传递params参数,具体知识为props属性 。
7.2、传参方法

字符串形式
this.$router.push(“/search/”+this.params传参+“?k=”+this.query传参)模板字符串this.router.push("/search/+router.push("/search/+router.push("/search/+this.params传参?k=${this.query传参}")
注意： 上面字符串的传参方法可以看出params参数和’/'结合，query参数和？结合
http://localhost:8080/#/search/asd?keyword=asd
上面url中asd为params的值，keyword=asd为query传递的值。
对象（常用）
this.$router.push({name:“路由名字”,params:{传参},query:{传参})。