vue-router （两种路由模式编程式/组件式如何传参(优缺点)）

Posted 2021-07-08 fengshaopu

一、 vue-router 两种路由模式
使用流程：

1. 创建一个对象，通过 path 和 component 属性配置 URL 路径和组件的对应关系。
2. 通过这个配置创建路由：new VueRouter({routes})
3. 页面中添加 router-view 组件显示匹配到的组件
4. 页面中使用 router-link 组件制作路由跳转的按钮
5. 在JS中可以使用 this.$router.push 方法实现路由页面的跳转

Hash — 默认值，利用 URL 中的hash("#") 、

history-- 利用URL中的路径（/home）

二、编程式/组件式
1.编程式：
一种是在组件的标签上用点击事件直接$router.push(“路由”)跳转

    <button @click="$router.push('q')">5</button>

一种是在方法methods中实现路由跳转

 tz(){
      this.$router.push("about")
    }

2.组件式：
1.
<router-link to="about" />跳页面使用
2.<router-view></router-view> 页面显示内容
3.routerlink：
组件支持用户在具有路由功能的应用中（点击）导航。 通过 to 属性指定目标地址，默认渲染成带有正确链接的 标签，可以通过配置 tag 属性生成别的标签.。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名。

三、如何传参(优缺点)、

1. 二中出传参方法，query、params

2. query 传参：通过在 router-link
   或this.$router.push()传递通过this.$route.query.id 来接收

   优点：通用性比较好，刷新数据不会丢失

   params 传参：通过在 router-link 或 this.$router.push()传递，通过this.$route.params.id来接收

   优点：传递数据量在，优雅