Vue项目实战(一)：路由分析

1. vue-router: 前端路由：KV键值对
1.1. key：URL(地址栏中的路径)，value: 相应的路由组件
1.2. 注意先分析项目的结构: 尚品汇项目为例，上中下结构
1.3. 路由组件：Home首页路由组件、Search路由组件、login登陆路由组件、Register注册路由组件
1.4. 非路由组件：Header(首页和搜索页)、Footer(首页和搜索页)，登录注册页面没有

2. 路由组件的搭建：
2.1. 根据上述分析，路由组件应该有四个：Home、Search、login、Register
2.2. components文件夹：放置非路由组件(或者共用的全局组件)
2.3. pages|views文件夹：放置路由组件
2.4. 配置路由：项目当中配置的路由一般放置在router文件夹中

3. 路由组件与非路由组件的区别：
3.1. 路由组件一般放置在pages|views文件夹，非路由组件一般放置在components文件夹
3.2. 路由组件一般需要在router文件夹中进行注册(使用的时候一般用的是组件的名字)，非路由组件在使用的时候，一般都是以标签的形式使用
3.3. 注册完理由，不管是路由组件还是非路由组件，身上都有$route和$router属性
---- $route：一般获取路由信息(路径、query、params等)
---- $router：一般进行编程式导航，进行路由跳转(push|replace)

4. 路由的跳转：
4.1. 路由的跳转有2种形式：
(1). 声明式导航：router-link，可以进行路由跳转，但是务必添加to属性
(2). 编程式导航：push | replace，可以进行路由跳转;声明式导航能做的，编程式导航都能做，编程式导航除了可以进行路由跳转，还可以做其他的业务逻辑

5. 路由传参：
5.1. params参数：属于路径当中的一部分，需要注意，在配置路由的时候需要占位
5.2. query参数：不属于路径当中的一部分，类似于ajax中的queryString /home?k=v&kv,不需要占位

5.3. 路由传参方式：
5.3.1. 路由传参方式一：字符串形式

this.$router.push('/search' + this.keyword + '?k=' + this.keyword.toUpperCase())

5.3.2. 路由传参方式二：模版字符串

this.$router.push(`/search${this.keyword}?k=${this.keyword.toUpperCase()}`)

5.3.3.路由传参方式三：对象 --- 需要去router>>>index.js中找到对应的路由(此处对应的是search)为其命名 name:'search'
注意: 若使用对象写法可以是name或者是path形式， 但path不能与params参数一起用，用到params参数时，只能使用name

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

6. 路由相关面试题：
6.1. 路由传递参数(对象写法)path是否可以结合params参数一起？
答：路由跳转传递参数的时候，对象的写法可以是name、path形式，但是需要注意path不能与params参数一起用
6.2. 如何指定params参数可传可不传？
答：如果路由要求传递params参数，但是就是没有传，这时URL会出问题。
解决办法：在配置路由的时候在占位的后面加上一个问号(即可传或者不穿)params参数,如下代码所示：

//router >>> index.js

routes:[
   {
      path: "/search/:keyword?",
      component: Search,
      meta: {show: true},
      name: "search"
   }
]

6.3. params参数可传可不传，但如果传递的是空串，如何解决？
答：使用undefined解决： params参数可传可不传 (空的字符串)

// Header >>> index.vue
<script>
export default {
   name: '',
   data(){
      return {
         keyword:''
      }
   },
   methods:{
      goSearch(){
         this.$router.push({
            name: 'search',
            params:{keyword:'' || undefined},
            query:{k:this.keyword.toUpperCase()}
         })
      }
   }
}
</script>

6.4. 路由组件能不能传递props数据？
答：可以。有三种写法

6.4.1. 布尔值写法：只有params参数

//router >>> index.js 配置路由文件
routes:[
   {
      path: "/search/:keyword?",
      component: Search,
      meta: {show: true},
      name: "search",
      //路由组件可以传递props
      props: true,
   }
]

// Search >>> index.vue
<template>
   <div>
      //使用的时候直接使用keyword
      <p>{{keyword}}</p>
   </div>
</template>

<script>
export default {
   name: '',
   //此处接收props
   props:['keyword']
}
</script>
....

6.4.2. 对象写法：

//router >>> index.js 配置路由文件
routes:[
   {
      path: "/search/:keyword?",
      component: Search,
      meta: {show: true},
      name: "search",
      //路由组件可以传递props
      props: {a: 1, b: 2},
   }
]

// Search >>> index.vue
<template>
   <div>
      //使用的时候直接使用a,b
      <p>{{a}}</p>
      <p>{{b}}</p>
   </div>
</template>

<script>
export default {
   name: '',
   //此处接收props
   props:['a','b']
}
</script>

6.4.3.函数写法：可以是params参数，也可以是query参数

//router >>> index.js 配置路由文件
routes:[
   {
      path: "/search/:keyword?",
      component: Search,
      meta: {show: true},
      name: "search",
      //路由组件可以传递props
      props:(route)=>{
         return {
            keyword:$route.params.keyword,
            k:$route.query.k
         }
      },
      //或者这样写
      props:(route)=>({keyword:$route.params.keyword,k:$route.query.k}),
   }
]

// Search >>> index.vue
<template>
   <div>
      //使用的时候直接使用keyword,k
      <p>{{keyword}}</p>
      <p>{{k}}</p>
   </div>
</template>

<script>
export default {
   name: '',
   //此处接收props
   props:['keyword','k']
}
</script>

7.编程式路由跳转到当前路由(参数不变)，多次执行会抛出NatigationDuplicated的警告错误
声明式导航没有这类问题，因为vue-router底层已经处理好了

7.1. 为什么编程式导航进行路由跳转的时候，会有这种警告错误？
“vue-router”:"3.5.3",最新的vue-router引入了promise
解决方法：通过给push方法传递相应的成功、失败的回调函数，可以捕获到当前错误，可以解决

//通过底部的代码可以实现解决错误
//治标不治本，在别的组件当中push/replace,编程式导航还是会有类似错误
this.$router.push({name:'search',params:{keyword:this.keyword},query:{k:this.keyword.toUppercase()}},()=>{},()=>{})