vue的路由

筱流
265 阅读2分钟

「这是我参与2022首次更文挑战的第29天，活动详情查看：2022首次更文挑战」

vue路由项目中，如果需要实现 rest 参数传递，需要配合路由的相关配置

实现方式

  • 1、在页面定义请求路径时，以 URL的地址定义规范拼接参数的值

    请求地址  /detail   
携带参数  filmId=234567   
         aa=1234
​
    get：  /detail?filmId=234567&aa=1234
    rest:  /detail/234567/1234  或 234567/detail/1234 或 1234/detail/234567  ……

  • 2、在vue的路由定义中，需要在path属性构建时，明确表示地址存在几个部分且那些部分为参数

    • 路由地址配置属性 path ，可借助关键字: 描述地址中那些部分为rest参数

    • :后所定义的名称，将成为该参数的变量名

      { path:"/detail/:filmId/:aa" }

    • rest风格参数定义后，可通过 ? 描述该参数是否为可选参数

      { path:"/detail/:filmId?/:aa?"},

  • 3、在目标组件中以激活路由对象 $route 进行参数的获取

    • 配置路由path时，:后定义的变量名，将作为参数名写入 params对象中，用于指代参数
    vm.$route.params
vm.$route.params.参数名

router-link的to属性定义

  • to 作用是用于完成组件切换指向，定义携带参数

  • 当to属性以 v-bind 方式进行数据绑定时，可用于拆分地址和参数

    • 取值string 类型 ：

      • get : 传统的 string路径定义方式 to="路径?参数名=参数值&参数名=参数值……"
      • rest : to=" ……路径/参数…… "

    • 取值object类型 ：以对象方式拆分 路径的 组件地址 和 参数 （==可以直接定义为$router.push(opt)的参数==）

      • get ：to=" { path:'组件的路径地址'， query:{ key:value,key:value } } "

      • get ：to=" { name:'组件的路径地址'， query:{ key:value,key:value } } "

      • rest ：to=" { name:'路由组件的别名'， params:{ key:value,key:value } } "

        • ==rest方式必须使用具名路由传递参数==
        • 此时路由切换将不受 path 属性的影响，只要保证 name 属性的值不变即可

  • 具名路由对于参数的影响

    • 因具名路由不受path属性的影响，因此在切换时会导致路径的特殊变化

编程式导航

  • 通过JS代码控制路由切换，统称为编程式导航

  • Vue.use(VueRouter) 提供组件全局实例属性 $router

    • $router 对象中，存放编程式导航的执行方法，因此该对象被称为 路由控制对象
      Object.defineProperty(Vue.prototype, '$router', {
    get: function get () { return this._routerRoot._router }
  });

$router 的常用方法

-   $router.push(`location`) 跳转到指定页面

    -   location 参数 以string 方式定义跳转目标组件的地址和参数
    -   location 参数 以object 方式定义跳转目标组件的地址和参数

-   $router.go(n) 模拟浏览器的 前进按钮

    -   n > 0，表示从历史记录中向前前进多少个页面
    -   n < 0 , 等效于$router.back()，可以通过n控制退回的层级

-   $router.back() 模拟浏览器的 后退按钮
avatar
文章
阅读
粉丝