# Vue全家桶之vue-route

前端路由，优点就是体验爽，缺点就是不利于SEO，无法记住页面上下级。

router-view占位渲染模版，router-link类似于超链接作为前端路由页面导航。this.$router.push({path:'/'})这是JS逻辑代码上的路由页跳转，也叫编程式路由。

1. 动态路由匹配

   • 当我们需要查看某个实体的具体信息时，视图页面应该都是同样的，但是接收到后端的数据不同，URL上的路由也不同。
   • 这时候的动态路由匹配类似于RESTFul中使用GET方式获取某实体某编号的详细信息，例如/users/:id匹配到/users/102，此时可以使用$route.params获取这样的Request数据: {id: 102}。
   • 复杂一点：/users/:uid/goods/:gid可以匹配到类似/users/102/goods/32这样的路由，代表第102号用户请求第32件商品，至于到底这个请求是需要做删除，修改还是查询操作，我们要看HTTP方法是什么。实际上考虑到安全性，这里的ID在大型项目中一般会使用uuid的长加密方式去实现。此处的$route.params获取到的Request数据为{uid: 102,gid: 32}。

2. 嵌套路由

   • 常搭配router-view制作后台页面，类似AJAX一部刷新局部页面的效果。
   • 嵌套路由和嵌套组件类似，import导入组件后使用children: []定义子路由，参数有path:，name:和component:。
   • 子路由path不允许使用根目录，组件名一般首字母大写驼峰命名。
   • 嵌套子路由router-link的to属性必须写绝对路径，这种形式又叫做陈述路由。

3. 编程式路由

   • 下面示例的路由path路径建议使用单引号。

   • 编程式路由一般通过点击按钮触发函数实现，函数内部使用这样的语句：this.$router.push({path: '/goods'})。

   • 下面是路由的跳转，同时携带参数。目标页面可以使用$route.params接收传递过来的参数。

   • 定义路由API使用router，获取路由参数使用route。

     $router.push('name')
     $router.push({path: '/goods'})
     $router.push({path: 'name?age=23'})
     $router.push({path: 'name', query: {age: 23}})
     $router.go(1)
     

4. 命名路由和命名视图

   • 基于router-link的命名路由一般这样写：<router-link :to='{name: 'Cart'}'>，这里的name为路由中组件定义时的名字。
   • 如果要实现带参数的命名路由，你可以这样写：<router-link :to='{name: 'Cart', params: {cartId: 123}}'>。
   • 给不同的router-view添加name,可以使页面分块显示多个组件，类似于后台界面。这里的name值和路由定义的name值要一致。
   • 类似于上左右结构的UI，一般不会用多个router-view去实现，而是在父组件中嵌套左右两个组件实现。