路由组件和非路由组件区别:
1. 路由组件一般放置在pages|views文件夹中, 非路由组件一般放置在components文件夹中
2. 路由组件一般需要在router文件夹中进行注册(使用的即为组件的名字), 非路由组件在使用的时候,一般用标签的形式使用.
3. 注册完路由,不管是路由组件还是非路由组件身上都有$route,$router属性.
注意:
1. $route:一般获取路由信息[路径, query, params等等]
2. $router: 一般进行编程式导航进行路由跳转[push|replace]
路由的跳转的方式:
1: 声明式导航 : router-link,必须要有to属性才可以进行路由的跳转
2: 编程式导航 : push|repace, 可以进行路由跳转
注意:
编程式导航:声明式导航能做的,编程式导航都能做
但是编程式导航除了可以进行路由跳转,还可以做一些其他的业务逻辑
路由传参:
1: params参数: 属于路径中的一部分,需要注意,在配置路由的时候,需要占位.
2: query参数: 不属于路径的一部分,类似于Ajax中queryString /home?k=v&k=v,不需要占位.
// 1. 字符串形式
this.$router.push('/search/' + keyword + '?k=' + this.keyword.toUpperCase())
// 2. 模板字符串形式
this.$router.push(`/search/ ${keyword}?k=${this.keyword.toUpperCase()}`)
// 3. 对象形式
this.$router.push({name:"search",params:{keyword:this.keyword}, query:{k:this.keyword.toUpperCase()}})
面试题:
1. 路由传参(对象写法)path是否可以结合params参数一起使用?
答: 路由跳转传递参数的时候,对象写法可以是name,path形式,但是需要注意的是:path这种写法不能与params参数一起使用.
---
2. 如何指定params参数可传可不传?
答: 在占位的后面加上 ? [params可以传递也可以不传递]
path:"/search/:keyword?",
---
3. params参数可以传递也可以不传递参数,如果传递的是空串,如何解决?
答: 使用undefinded解决: params参数可传递,不传递(空字符串)
this.$router.push({name:"search",params:{keyword:''|| undefinded}, query:{k:this.keyword.toUpperCase()}})
---
4. 路由组件能不能传递props数据?
答: 可以
// 1. 布尔值写法:只能是params参数
props:true,
// 2. 对象写法:额外的给路由组件传递一些props
props:{a:1, b:2}
// 3. 函数写法
props:($route) => {
return {keyword: $route.params.keyword,
k: $route.query.k}
}