【Vue】路由传参和动态路由_路由的懒加载

1、路由传参和动态路由

1.1路由传参

1.1.1简介

• 路由传参主要用于在不同页面（或组件）间传递数据。
• Vue Router提供了几种方式来实现路由传参

1.1.2使用

1. 查询参数（Query Parameters）

查询参数通过URL的查询字符串（?user=123）来传递。这种方式传递的数据会附加在URL后面，并且可以在浏览器的地址栏中看到。

使用方式：

• 编程式导航：router.push({ path: 'foo', query: { user: '123' }})
• 声明式导航：<router-link :to="{ path: 'foo', query: { user: '123' }}">Go to Foo</router-link>

在目标组件中，可以通过this.$route.query.user来获取查询参数。

2. 动态片段（Dynamic Segments）

动态片段允许我们在URL中包含动态片段，并将它们映射到组件的props上。这种方式通常用于用户详情页等场景，其中URL的一部分会改变以反映当前显示的内容。

定义路由：

const router = new VueRouter({  
  routes: [  
    // 动态片段以冒号开头  
    { path: '/user/:id', component: User }  
  ]  
})

使用方式：

• 编程式导航：router.push({ name: 'user', params: { id: 123 }})（注意：当使用params时，通常需要配合name而非path）
• 声明式导航：<router-link :to="{ name: 'user', params: { id: 123 }}">User</router-link>（但router-link通常不支持params，这里仅为说明，实际上应该使用query或path）

1.2动态路由

1.2.1简介

• 动态路由通常指的是基于路由匹配到的不同参数，动态渲染不同的组件或执行不同的逻辑。
• 这实际上是通过定义路由时使用的动态片段（如上面所述）来实现的。
• “动态路由”这个词也常用于描述在运行时根据某些条件动态添加或修改路由配置的情况。

1.2.2使用

// Vue Router 3.x  
router.addRoutes([  
  { path: '/new-route', component: NewComponent }  
])  
  
// Vue Router 4.x  
router.addRoute({ path: '/new-route', component: NewComponent })

2、路由的懒加载

2.1 概念

Vue路由懒加载是指在需要使用某个路由组件时，才加载该组件的代码，以减少初始加载时间和提高应用程序性能。其实现原理是在需要使用某个路由组件时，才动态加载该组件的代码。

2.2 实现方式

在Vue中，实现路由懒加载主要有以下几种方式：

1、使用异步组件

• 这是最常见的实现方式。在定义路由时，可以将组件定义为一个返回Promise的函数，该函数使用import()语法动态导入组件。这种方式利用了Webpack的代码分割功能，可以自动将每个路由组件打包成单独的chunk。
• 示例代码：

const Home = () => import('./components/Home.vue')  
const routes = [  
  { path: '/', name: 'Home', component: Home },  
  // 其他路由...  
]

2、结合Vue Router的懒加载和Webpack的魔法注释

• 在import()语法中，还可以添加Webpack的魔法注释（magic comments）来进一步控制代码分割的行为，如指定chunk的名称。
• 示例代码：

const Home = () => import(/* webpackChunkName: "home" */ './components/Home.vue')

2.3 优点

1. 加速网页加载：通过延迟加载组件或模块，减少了初始加载时间，加快了网页的加载速度。
2. 提高网页响应速度：减少了组件或模块的加载时间，提高了网页的响应速度。
3. 减少资源浪费：只加载用户实际需要的组件，避免了不必要的资源浪费。

2.4 缺点

1. 网络性能：虽然初始加载时间减少了，但当用户首次访问某个路由时，会有额外的网络请求和加载时间。如果网络条件不佳，这可能会导致用户体验下降。
2. 用户体验：用户在切换路由时可能会遇到延迟，因为需要等待新路由的组件加载完成。这可能会影响用户体验，尤其是对于那些对响应速度有高要求的用户。
3. 开发复杂度：实现路由懒加载可能会增加代码的复杂度，尤其是在管理代码分割和异步组件时。开发者需要确保异步组件正确加载，并且处理加载状态和错误情况。
4. 缓存利用：如果用户频繁地在不同的路由间切换，路由懒加载可能会导致浏览器缓存利用不充分，因为每次访问都需要重新下载组件。
5. SEO影响：对于需要搜索引擎优化（SEO）的应用来说，懒加载可能会影响搜索引擎的爬虫效率，因为爬虫可能不会等待异步组件加载完成，从而导致页面内容没有被完整索引。