Vue.js学习第十二天——动态路由、懒加载、嵌套路由及传递参数相关

一. 动态路由

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

二. 路由懒加载

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

三. 嵌套路由

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

使用： 1. 创建两个组件indexNews.vue和indexMessage.vue这两个组件是index界面下的两个子组件；

配置映射关系：

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

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
      }
  ]
},

四. 传递参数

使用：有 params 和 query 两种类型的传递方式
比较：

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

query方式的使用：

创建profile组件
配置路由映射关系

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

扫描二维码关注公众号，回复： 9338914 查看本文章

methods: {
    profileClick(){
      this.$router.push({
        path: '/profile',
        query: {
          name: 'beanBag',
          age:18
        }
      })
    }
  }

在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只有在处于活跃路由时才会存在于对应的那个路由

bagBean

发布了28 篇原创文章 · 获赞 22 · 访问量 1907

私信关注

Vue.js学习第十二天——动态路由、懒加载、嵌套路由及传递参数相关

Vue.js学习第十二天——动态路由、懒加载、嵌套路由及传递参数相关

一. 动态路由

二. 路由懒加载

三. 嵌套路由

四. 传递参数

猜你喜欢