Vue-Router学习第二弹动态路由\懒加载\嵌套路由

在咱们作项目时确定会有出现动态路由：

举个栗子：

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

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

两种动态路由

一种是params参数添加：

首先如今Index.js添加id

 {
    path: "/user/:id",
    component: User
  }

而后再绑定Id

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

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

this.$route.params.id

还有一种是query参数路由：

 <router-link :to="{path:'/proflie',query:{name:'雷荣',height:1.88,age:18}}" tag="button">个人</router-link>

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

动态路由仍是很是的简单的；接下来就是懒加载学习了

懒加载

什么是懒加载？

咱们能够看官方文档怎么解释

 

 

 就是说当咱们打包时，全部的js都打包在一块儿，在页面加载的时候会显得更加的吃力，因而就想了一个办法可不能够在使用某个组件的时候就加载某个js，其余的不调用，“用时即加载”。

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

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

就是这么简单；直接将之前引用组件的地方改为这样就能够了

而后就是

嵌套路由

上代码一看就知：

{
    path: '/home',
    component: Home,

    children: [
      {
        path: '/',
        redirect: 'message'
      },
      {
        path: 'message',
        component: HomeMessage
      },
      {
        path: 'news',
        component: HomeNews
      }

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

未完待续。。。