尚品汇---day1

  路由组件和非路由组件区别:

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}

            }