关于vue-router

    学习vue也有一段时间了，也用vue做了项目。。下面对vue-router做一个个人的总结，以便日后复习 

   首先了解一下：什么是前端路由？

    路由是根据不同的URL地址展示不同的内容或页面

    前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做，之前是通过服务器根据url的不同返回不同的页面实现的

   什么时候使用前端路由

     在单页面应用，大部分页面结构不变，只改变部分内容的使用

   前端路由有什么优点和缺点

      优点：用户体验好，不需要每次都从服务器全部获取，快速展现给用户

      缺点：不利于SEO

               使用浏览器的前进，后退键的时候会重新发送请求，没有合理地利用缓存

               单页面无法记住之前滚动的位置，无法再前进、后退时记住滚动的位置

    下面是分别对动态路由配置、嵌套路由、编程试路由和命名路由和命名视图

       什么是动态路由

           图解：

          动态路由简单点说就是：通过不同的路由值（：username）访问同一个组件（user）

          模式一对应例子：

             在'/goods/'后面跟个  :goodsId 表示这是可选的，就是说不管:goodsId是啥，都可以访问GoodsList组件在GoodsList页，可以通过$route.params获得路由参数

   模式二对应例子:

     什么是嵌套路由

         很简单：就是路由嵌套路由

        示例

      

   goodsList页

    

   什么是编程式路由

      也就是通过js来实现页面的跳转

      方式：1：$router.push("name")

                 2:  $router.push({path:"name"})

                 3:  $router.push({path:"name?a=123"})或者$router.push({path:"name",query:{a:123}})

                 4:  $router.go(1)

     如果想跳转到cart页。用之前的方式是这样的：

    

    goods页，用router-link实现路由的跳转

     

     而编程式路由的实现方式就比较简单了

     图示：

   

   图中的this.$router.push("/cart"); 等价于 this.$router.push({path:'/cart'});也就是他们一样跳转到cart页

   什么是命名路由和命名视图

       给路由定义不同的名字，根据名字进行匹配

       给不同的router-view定义名字，通过名字进行对应组件的渲染

      示例:

     

    箭头所指就是命名路由的名称

    在goods页

    

   注意：此处有坑，此处有坑！箭头所指处to前的":"一定要加上

   命名视图很少用我也没总结过，下回补上

   最后补充一点

  关于路由mode

  

当mode为history时此处的#号就不用了，可以直接localhost:8081/goods访问，想加上"#"只需把mode值改为"hash"

总结完了，技术不精仅作为自己的学习记录。