13_动态路由、懒加载、嵌套路由及传递参数相关

. 动态路由

  • 背景:有时候当我们在访问某些页面的时候,一个页面的 path 路径可能是不确定的,比如会有这样一个场景:我们在用户登录的时候,我们希望它的路径不是一个固定的,例如 www.xxx.com/user,我们希望后面跟着用户的id,类似这样www.xxx.com/user/beanBag,这样的需求我们怎么实现呢?
  • 使用: 1. 创建用户组件 user.vue 2. 建立路由映射关系(userId 指待会儿传进来的值) javascript { path: '/user/:userId', component: user } 3. 绑定 router-link 中的 to 属性 <router-link v-bind:to="'/user/'+userId">用户</router-link> 4. 在 data 中传入数据 javascript export default { name: 'App', data() { return { userId: 'beanBag' } } }

. 路由懒加载

  • 背景:当我们打包构建应用时,JavaScript 包会变得非常大,影响页面加载,所以必须由一种方法来提升用户体验
  • 了解: 在我们打包好的 Js 文件中我们会发现有三个文件,分别是 app、manifest 和 vendor,这三个 Js 文件分别负责我们的业务代码、为打包代码做底层支撑以及第三方的一些代码(vue,axios...)app 中将我们的不同文件作为数组的参数传入相关函数中处理,所以如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问时才加载对应组件,这样就能解决此问题
  • 使用: 1. 结合 Vue 的异步组件和 Webpack 的代码 2. AMD 写法 3. ES6 写法(推荐使用)const index = () => import('../components/index.vue'); //导入的时候就指定为懒加载

. 嵌套路由

  • 背景:当我们访问一个页面的时候,这个页面中有很多小的页面,倘若我们向以前一样配置映射关系,那么所有的路径都会是处于同一级别,不利于我们的管理,如果能够在大的路径下划分小的路径,就能方便我们的管理

  • 使用: 1. 创建两个组件 indexNews.vue 和 indexMessage.vue 这两个组件是 index 界面下的两个子组件; 2. 配置映射关系:

    ```javascript
    {
        path: '/home',
        component: index,
        children: [
            {
                path: 'message',
                component: indexMessage
            },
            {
                path: 'news',
                component: indexNews
            }
        ]
    },
    ```
    
    1. index.vue 中创建这两个文件的入口
      <router-link to='/home/news'>新闻</router-link>
      <router-link to='/home/message'>消息</router-link>
      <router-view></router-view>
      
  • 拓展:为嵌套路由添加默认路径,在 children 中添加默认路由的配置即可

{
  path: '/home',
  component: index,
  children: [
      {
          path: '',
          redirect: 'message'
      },
      {
          path: 'message',
          component: indexMessage
      },
      {
          path: 'news',
          component: indexNews
      }
  ]
},

. 传递参数

  • 使用:有 paramsquery 两种类型的传递方式
  • 比较
类型paramsquery
配置路由格式/router/:id/router(一般配置)
传递方式在path后面跟上对应的值对象中使用query的key作为传递方式
传递后形成的路径/router/beanBag/router?id=beanBag
使用场景数据传递较少数据传递较多
  • query 方式的使用

    1. 创建 profile 组件

    2. 配置路由映射关系

    3. 在 APP.vue 中创建一个 button(或者直接 rputer-link 标签),button 监听点击事件 profileClick 方法,在方法中写相关代码传入参数

      methods: {
          profileClick(){
            this.$router.push({
              path: '/profile',
              query: {
                name: 'beanBag',
                age:18
              }
            })
          }
        }
      
    4. 在 profile.vue 界面中使用参数

      <template>
        <div>
            <h3>我是profile组件</h3>
            <p>{{$route.query.name}}</p>
            <p>{{$route.query.age}}</p>
        </div>
      </template>
      

要注意,在使用代码方式进行路由跳转的时候使用的是$router,在拿到传入数据时使用的是$route$router对象是 vue-router 中的一个实例,在整个 vue-router 实例中都会存在,而$route只有在处于活跃路由时才会存在于对应的那个路由

Last Updated:
Contributors: hqchqc