在我们做项目时肯定会有出现动态路由：

一个品种的商品页面会有同类不同样的商品就要在路由的后面加一个id；

Vue的路由id是这样添加的：

首先现在Index.js添加id

  1.  {
  2.     path: "/user/:id",
  3.     component: User
  4.   }

然后再绑定Id

  1.  <router-link :to="'/user/'+dataid" tag="button">用户</router-link>

我们怎么动态获取这个id呢？

  1. this.$route.params.id
  1.  <router-link :to="{path:'/proflie',query:{name:'雷荣',height:1.88,age:18}}" tag="button">我的</router-link>

直接就改成这样，不用配置什么id

动态路由还是非常的简单的；接下来就是懒加载学习了

我们可以看官方文档怎么解释

 

 

 就是说当我们打包时，所有的js都打包在一起，在页面加载的时候会显得更加的吃力，于是就想了一个办法可不可以在使用某个组件的时候就加载某个js，其他的不调用，“用时即加载”。

概念知道后，Vue怎么实现这个功能呢？

  1.  //直接懒加载
  2. const User = () => import('../components/User.vue')
  3. const Home = () => import('../components/Home.vue')
  4. const About = () => import('../components/About.vue')

就是这么简单；直接将以前引用组件的地方改成这样就可以了

然后就是

上代码一看就知：

  1. {
  2.     path: '/home',
  3.     component: Home,
  5.     children: [
  6.       {
  7.         path: '/',
  8.         redirect: 'message'
  9.       },
  10.       {
  11.         path: 'message',
  12.         component: HomeMessage
  13.       },
  14.       {
  15.         path: 'news',
  16.         component: HomeNews
  17.       }

就是在主路由里添加children，注意：这里的path可以不用写‘/’

 

版权声明：本文为zy-simpleboy原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/zy-simpleboy/p/15130326.html