route和router

• 注册完路由，不管是路由组件还是非路由组件身上都有$route、$router属性
• $route一般获取路由信息【路径、query、params等等】
• $router一般进行编程式导航进行路由跳转【push/replace】

router文件

在src文件下创建一个router文件，包含index.js用来配置路由

App.vue

要配置路由组件出口 在配置路由时，可以给路由添加路由元信息meta。

main.js

引入注册路由

路由跳转与传参

路由的跳转

声明式导航

router-link，可以进行路由的跳转

编程式导航

push|replace，可以进行路由跳转

选择

编程式导航：声明式导航能做的，编程式导航都能做。除此之外，编程式导航还可以做一些业务逻辑。

路由传参

参数的写法：

• params参数：属于路径中的一部分，在配置路由的时候，需要占位
• query参数：不属于路径中的一部分，类似于Ajax中的queryString /home?k=v&kv=，不需要占位
  一般使用对象形式

几个问题

• 1.路由传递参数（对象写法）path是否可以结合params参数一起使用？
• 答：不可以。对象的写法可以是name、path形式

---

• 2.如何指定params参数可传可不传？
• 如果路由要求传递params参数，但是你就不传递，URL就会有问题。可以在占位的后面加一个问号代表params可以传递或者不传递

---

• 3.路由参数传递的是空串，如何解决？
• 使用undefined解决

---

• 4.路由组件能不能传递props？
• 可以。有三种写法：

---

• 5.编程式路由跳转到当前路由（参数不变），多次执行会抛出错误？
• 声明式导航没有这类问题，因为vue-router底层已经处理好了。因为最新的vue-router引入了promise。通过给push方法写入相应的成功和失败的回调函数，但是治标不治本。

治标 治本