Vue-router传递参数以及动态加载

开门见山

本篇文章主要是给大家带来怎么在路由中传递参数，其实这是个很常见的功能

方式1

在路径中通过占位符携带参数，具体演示如下

const routes = [
  {
     
    path: '/',
    name: 'Index',
    component: Index
  },
  {
     
    path: '/detail/:id',//重点
    name: 'Detail',
    component: () => import(/* webpackChunkName: "detail" */ '../views/Detail.vue')
  }
]

组件中使用参数

通过当前路由规则获取：{
     {
      $route.params.id }} //这种方式传递参数不是很推荐，因为这个组件强依赖于路由

也就是说使用这个组件的时候必须路由传递参数，

方法二

路由规则中开启prop 设置成布尔值即可，

const routes = [
  {
     
    path: '/',
    name: 'Index',
    component: Index
  },
  {
     
    path: '/detail/:id',
    name: 'Detail',
    // 开启 props，会把 URL 中的参数传递给组件
    // 在组件中通过 props 来接收 URL 参数
    props: true,
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "detail" */ '../views/Detail.vue')
  }
]
组件中使用方法如下

<template>
  <div>
  <!-- 方式2：路由规则中开启 props 传参 -->
  通过开启 props 获取：{
     {
      id }}</div>
</template>
<script>
export default {
     
  name: 'Detail',
  props: ['id']//传递的key值
}
</script>

//这种方式更为常见，使用起来也更加方便

组件动态加载

这一部分也就是路由的懒加载，当用户访问主页的时候，并不去加载下一级组件，

当用户点击访问下一级组件的时候 才开加载下一级组件，这一页可以提高性能

route 下的index文件内容

const routes = [
  {
     
    path: '/',
    name: 'Index',
    component: Index//首页组件
  },
  {
     
    path: '/detail/:id',
    name: 'Detail',
    props: true,
    component: () => import(/* webpackChunkName: "detail" */ '../views/Detail.vue')//路由懒加载实现
  }
]

谢谢观看，如有不足，敬请指教