路由传参数

路由传参

1.query，字符串写法,对象写法

query参数直接路径后面?  加参数

 

<router-link to="/Student/Xinxi/Detail?id=666&title=你好啊">

        消息01 </router-link>

 

接收方，通过路由route,接收   可以使用插值语法   {{$route.query.xxx}}

 

但是得动态传递数据，这样数据是死的 id=666,title="你好啊"

所以：   ?key=value&key=value

 

 <router-link :to="`/Student/Xinxi/Detail?id=${m.id}&title=${m.name}`"> 
            <!--  :加了冒号全部当成js表达式来写   ``又变成字符串,但是模板字符串得里面混着js表达式所以${}  -->
        {{m.name}} </router-link> 

 

2.params参数，字符串，对象写法

parmas参数 直接路径/参数

 

      

params字符串写法

<router-link to="/Student/Xinxi/Detail/666/你好啊">

        消息01 </router-link>

 

但是这样写路由器不知道这个路由后面两个/666/你好啊是参数,所以在配置路由规则的时候

就得    在Xinxi(这个最后一级路由那里path添加占位符)

path: 'Xinxi/Detail/:id/:title'    这样路由器就知道后面两个是参数不是路由路径而是参数

params传参对象写法

 <router-link
          v-bind:to="{
              name:'Detail',
                params:{
                    id:m.id,
                    name:m.name
                }
            }"
          >
              {{m.name}}
          </router-link>

 

 

 

ps：注意这里params传参 得用name:"xxx"作为要跳转的组件的名字，不能写path:/xx/xx/ 

 

 

 

传参方式可划分为params传参和query传参，而params传参又可以分在url中显示参数，和不显示参数两种方式

1.params传参(显示参数)，又可分为声明式，和编程两种方式

~声明式 router-link:该方式是通过router-link组件的to属性实现，子路由需要提前配置好参数

<router-link  to="/home/x">
跳转到子路由
</router-link>

{
path: '/child/:id',
component:Child
}

 

2.编程式 this.$router.push:同样需要子路由提前配置好参数。

{
path: '/child/:id',
component:Child
}

this.$router.push({
    path:'/child/${id}',
})

接收:this.$route.params.id 

2.params传参(不显示参数),也可以分为声明式，和编程式两种方式，与显示参数不同的是，这里是通过路由的别名 name 进行传值的

 

<router-link :to="{name:'Child',params:{id:1}}">跳转到子路由</router-link>

 

{
path: '/child',
name: 'Child',
component: Child
}

this.$router.push({
name:'Child',
params:{
id: 1
}
})

4.路由组件传递props数据方便路由组件接收

props传递数据为了方便接收路由组件(detail)接收,不用一直写$route.query.xxx或者

是$route.params.xxx，冗余，只需要在配置中写props:['xxx','xxx'],然后直接插值语法{{xxx}}就能用了

第一种写法:props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件

例如:   { component:Detail，props:{a:1,b:'hello'}      }

这样意思为给detail路由组件传递props参数，并且为对象,接收的话得在这个组件中

props:['a','b']接收

 

 

第二种写法:则把路由收到的所有的params参数通过props传给Detail组件

props:ture

 

 意思为把接收过来的参数以props形式传给 Detail,如（id，title）,

所以在Detail组件里可以这样接收 props:['id','title']

 

第三种写法:props值为函数，该函数返回的对象中的每一组key-value都会通过props传给Detail组件(可传query，params)

props:function($route){   //这是个回调函数,我们定义的我们不调用，由vue-router调用，并且传进来实参$route,我们以形参的形式接收???应该是这样理解
								return {
									id:$route.query.id,
									title:$route.query.title,
									a:1,
									b:'xxxxx'
								}
							}

 

router与route区别

1.router是VueRouter的一个对象,通过Vue.use（VueRouter）和VueRouter构造函数得到一个router的实例对象，这个对象中是一个全局的对象，包含了所有的路由，包含了许多关键的对象和属性，例如history对象，

$router.push（{path:'/path'}）,本质是向history栈中添加一个路由，在我们看来是切换路由，但本质是在添加一个histoty记录

$router.replace（{path:'/path'}）,替换路由，没有历史记录。

2.route是一个跳转的路由对象，每一个路由都会有一个route对象,是一个局部的对象，可以获取对应的name,path,params,query等。

$route.path 字符串,等于当前路由对象的路径，会被解析为绝对路径，如“/index/”

$route.params 对象，包含路由中的动态片段和全匹配片段的键值对

$route.query 对象,包含路由中查询参数的键值对，例如，对于/index?id=1,会得到$route.query.id == 1.

路由传参面试题

 

1.路由传递参数()对象写法，path是否可以结合params参数一起使用?

答:路由跳转传参的时候,对象的写法可以是,name、path形式，但是需要注意的是,path这种写法是不能与params参数一起使用的

 

 this.$router.push({path:'/search',params:{keyword:this.keyword},query:{k:this.keyword.toUpperCase()}})

   },
 

 

2.如何指定params参数可传可不传?

比如:配置路由传参的时候，站了位(params参数),但是路由跳转的时候就不传递，路径会出现问题

如果路由要求传递params参数,但是你就是不传递params参数，发现一件事情，url会有问题，

如何指定params参数可以传递，或者不传递，在配置路由的时候，在站位的后面加上一个问号

 

 {
            path: '/search/:keyword?',          /* 子路由提前配置好参数 */
            component: Search,
            meta:{show:true},
            name:'search'
        },

 

3.params参数可以传递也可以不传递，但是如果传递的是个空串,如何解决?

如:

this.$router.push({ name:'search',params:{keyword:''},query:{k:this.keyword.toUpperCase()}         })

 

使用undefined解决，params参数可以传递、不传递(空的字符串)

this.$router.push({ name:'search',params:{keyword:''||undefined},query:{k:this.keyword.toUpperCase()}         })