关于vue中查询和pramas的事情

//$router :是路由操作对象，只写对象。

//$route :路由信息对象，只读对象

//操作路线跳转

这个。$ router . push({ 0

姓名： '你好'，

参数：{

名称： '单词'，

年龄：'11 '

}

})

//读取路由参数接收

这个，名字=这个。$ route . params . name；

这个年龄=这个。$ route . params . age；

查询参数要按路径引入(也可以按名称引入)，params参数要按名称引入。

//查询参数，使用名称跳转。

这个。$ router . push({ 0

名称： '秒'，

查询： {

queryId:'20180822 '，

queryName:“查询”

}

})

//查询参数，使用路径跳转

这个。$ router . push({ 0

路径： '秒'，

查询： {

queryId:'20180822 '，

queryName:“查询”

}

})

//查询参数发送和接收

this.queryName=this。$ route . query . query name；

this.queryId=this。$ route . query . queryid；

2params传递参数

注意：参数只能通过名字来介绍。

//params参数使用名称。

这个。$ router . push({ 0

名称： '秒'，

参数： {

id:'20180822 '，

名称：“查询”

}

})

//参数接收参数

this.id=this。$ route . params . id；

这个，名字=这个。$ route . params . name；

//路由

{

path : '/second/: id/: name '，

名称： '秒'，

component :()=import(@/view/second)

}

应该指出的是：

Params是路由的一部分，参数名称必须添加在路由之后。查询是在url后拼接的参数。没有也没关系。

一旦在路线中设置了参数，参数就是路线的一部分。如果此路由有params参数，但在跳转过程中没有传递此参数，将导致跳转失败或页面没有内容。

如果路由后面没有/:ID/3360Name地址栏，则没有参数，但如果刷新，会发现页面获取参数失败。

因此，我们不可能阻止用户刷新，所以我们必须在路由后添加/:id/:name。

//params参数使用路径。

这个。$ router . push({ 0

路径： '秒'，

参数： {

id:'20180822 '，

名称：“查询”

}

})

//参数接收参数

this.id=this。$ route . params . id；

这个，名字=这个。$ route . params . name；

摘要

参数可以通过参数和查询传递。

使用params参数时，只能使用名称引入路由，即push只能包含name:'xxxx '，不能包含path:'/xxx'/XXX '，因为params只能使用名称引入路由。如果在这里写path，接收参数页将是未定义的！

使用查询参数使用路径引入路线。

Params是路由的一部分，参数名称必须添加在路由之后。查询是在url后拼接的参数。没有也没关系。

这两者有些不同。说白了，查询相当于获取请求。当页面跳转时，可以在地址栏看到请求参数，而params相当于post request，参数不会显示在地址栏。

解决问题：vue通过名称和参数调整页面参数，刷新参数丢失。

导出默认的新路由器({ 0

路线： [

{

路径： '/'，

redirect: '/main '，

},{

path: '/main '，

名称： '主'，

component :()=import(' @/view/Main ')，

儿童： [

{

//path: '/testPage '，//此方法不配置参数名，刷新页面时参数会丢失。

路径： '/test page/: aaa/3360 bbb '，//这样在按名称和参数刷新页面时，参数AAA和BBB不会丢失。

名称： '测试页'，

component :()=import(@/view/test page/test page)

},

]

},

]

})

methods: {

//路由调整参数传输测试

gorouttest(){ 0

//这个。$ router . push('/test page ')；

这个。$ router . push({ name : ' TestPage '，params: { aaa: ' 111 '，BBB : ' 222 ' })；

}

},

如果params用作对象，刷新页面将消失。

解决方案JSON.stringify()方法用于将JavaScript值转换为JSON字符串。然后在组件内部使用JSON，parse()再次转换为对象。或者选择vuex模式来传输组件内容中的值，并通过计算属性获得它们。

路由组件传参

在组件中使用$route会使其与其对应的route高度耦合，使得组件只能在一些特定的URL上使用，限制了其灵活性。

用道具分离组件和路由：而不是用$route耦合

常量用户={ 0

template :“DiV USer { { $ route . params . id } }/DiV”

}

const router=new VueRouter({ 0

routes :[{ path : '/User/: id '，component: User }]

})

常量用户={ 0

prop :[' id ']，

template :“DiV USer { { id } }/DiV”

}

const router=new VueRouter({ 0

路线： [

{ path: '/user/:id '，component: User，props: true }，

//对于包含命名视图的路线，必须分别为每个命名视图添加道具选项：

{

path: '/user/:id '，

组件： {默认值：用户，侧栏：侧栏}，

props: { default: true，sidebar: false }

}

]

})

通过道具解耦如果道具设置为真，route.params将被设置为组件属性。