vue路由

     

一，动态路由匹配

         

（1）单个参数时：

         1，路由设置：

              

         2，goods页面设置：

              

         3，路由载体

              

         4，url形式：使用时必须符合设置的路由规则，否则无法加载，如图sdf89是设置的goodsId

             

（2）多个参数时：

        1，路由设置：

            

        2，goods页面设置：

            

        3，路由载体

            

       3，url形式

            

二，嵌套路由

嵌套路由就是路由嵌套路由，首先新建两个子路由组件，比如Title.vue和Image.vue，

      1，在路由设置里加载组件并设置子路由

          

      2，使用时如下图所示，在父路由的页面使用<router-link>做路由跳转，子路由页面展示在<router-view>位置

            router-link本质是a标签，

          

      3，访问父路由连接访问页面，点击页面上子路由连接在页面上展示子路由内容

         

 

三，编程式路由

 

         

    1，路由设置，加载组件，配置路由

        

   2，使用编程方式实现路由跳转，可以使用router-link标签在页面上实现跳转

     （1）可以$router.push("name")跳转

       

    （2）使用$router.push({path:'name'})跳转

       

    （3）使用$router.push({paht:'/cart?goodsId=123'})实现跳转并传递参数

      

   （4）使用$route.query.goodsId获取url参数

      

   （5）$router.go(-1)实现后退或前进几步

      

四，命名路由和命名视图

     

    1，命名路由，在路由文件中需要正常的路由配置

     

   2，命名视图，router-view标签中的name属性值需要和路由配置文件中的components对象的key值对应

      

      

五，路由模式

vue中路由分history和hash两种模式，默认是hash模式，通过mode属性设置

      

      对于Vue 这类渐进式前端开发框架，为了构建SPA（单页面应用），需要引入前端路由系统，这也就是Vue-router存在的意义。前端路由的核心，就在于——— 改变视图的同时不会向后端发出请求。

   一、为了达到这个目的，浏览器提供了以下两种支持：

       1、hash ——即地址栏URL中的#符号（此hsah 不是密码学里的散列运算）。

          比如这个URL：http://www.abc.com/#/hello, hash 的值为#/hello。它的特点在于：hash 虽然出现URL中，但不会被包含在HTTP请求中，对后端完全没有影响，因此改变hash不会重新加载页面。

       2、history ——利用了HTML5 History Interface 中新增的pushState() 和replaceState() 方法。（需要特定浏览器支持）

            这两个方法应用于浏览器的历史记录站，在当前已有的back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改是，虽然改变了当前的URL，但你浏览器不会立即向后端发送请求。

           history模式，会出现404 的情况，需要后台配置。

    二、404 错误

          1、hash模式下，仅hash符号之前的内容会被包含在请求中，如 http://www.abc.com, 因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回404错误；

          2、history模式下，前端的url必须和实际向后端发起请求的url 一致，如http://www.abc.com/book/id 。如果后端缺少对/book/id 的路由处理，将返回404错误。