一、路由跳转方式
1、声明式导航
vue Router中的声明式导航就是 <router-link> 标签,那么router-link怎么带我们去我们要到的组件呢,是通过router-link的to属性到达对应的组件中。
<router-link to="/login">登录</router-link>
2、编程式导航
在Vue里,可以通过vm的$router对象来进行路由的管理
<button type="button" @click="goSearch">
goSearch() {
this.$router.push("/search");
}
二、路由传参方式的三种写法
传递的两种参数
params参数:属于路径中的一部分,需注意,在配置路由时,要先进行占位
query参数:不属于路径中的一部分,不需占位,类似ajax中的querystring,形如/search?k=&kv=
1、字符串的方式
首先在路径中要进行params参数占位
{
path: "/search/:keyword",
component: Search,
meta: { show: true },
},
同时传递params参数和query参数
goSearch() {
// 第一种:字符串的形式
this.$router.push(
"/search/" + this.keyword + "?k=" + this.keyword.toUpperCase()
);
}
2、模板字符串
同时传递params参数和query参数
goSearch() {
// 第二种:模板字符串
this.$router.push(
`/search/${this.keyword}/?k=${this.keyword.toUpperCase()}`
);
}
3、对象方式
此种方式必须加上name属性才可
{
path: "/search/:keyword",
component: Search,
meta: { show: true },
name: "search"
},
同时传递params参数和query参数
goSearch() {
this.$router.push({
name: "search",
params: { keyword: this.keyword },
query: { k: this.keyword.toUpperCase() },
});
}
三、路由传递参数相关面试题
1:路由传递参数(对象写法)path是否可以结合params参数一起使用?
不可以:不能这样书写,程序会崩掉 ,在对象写法中,path和params参数不能一起写,name和params可以
//错误写法
this.$router.push({
path: "/search",
params: { keyword: this.keyword },
query: { k: this.keyword.toUpperCase() },
});
2:如何指定params参数可传可不传?
路径要求传递params,但是实际并没有传递,如
//路径要求params
{
path: "/search/:keyword",
component: Search,
meta: { show: true },
name: "search"
},
//实际中并未传递params参数,会造成url问题
this.$router.push({
name: "search",
query: { k: this.keyword.toUpperCase() },
});
会发生url问题,此时需要在 path: "/search/:keyword"后加问号变为 path: "/search/:keyword?"
3:params参数可以传递也可以不传递,但是如果传递是空串,如何解决?
使用undefined解决:参数可以传递,不传递(空串问题)
params: { keyword: ''|| undefined},
this.$router.push({
name: "search",
params: { keyword: ''|| undefined},
query: { k: this.keyword.toUpperCase() },
});
4: 路由组件能不能传递props数据?
能
1)布尔值写法:只能传递params参数
{
path: "/search/:keyword",
component: Search,
meta: { show: true },
name: "search",
//布尔值写法:只能传递params参数
// props: true
}
///在跳转之后接受
props: ["keyword"],
可以观察到props值,
并接收值,通$route.params接收
<h1>params参数{{ $route.params.keyword }}******{{ keyword }}</h1>
2)对象写法,额外给路由组件传递一些props值
props: { a: 1, b: 2 }
接收值
props: [ "a", "b"],
<h2>传递的props属性值a,b****{{ a }},{{ b }}</h2>
3)函数写法,常用,可以传递params参数,query参数,其他参数,传递给路由组件
props: ($route) => {
return {
keyword: $route.params.keyword,
k: $route.query.k,
a: 1,
b: 1
}
}
props: ["keyword", "a", "b", "k"],
<h1>params参数{{ $route.params.keyword }}******{{ keyword }}</h1>
<h1>query参数{{ $route.query.k }}*************{{ k }}</h1>
<h2>传递的props属性值a,b****{{ a }},{{ b }}</h2>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。