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

$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

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

懒加载

什么是懒加载？

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

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

就是说当我们打包时，所有的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可以不用写‘/’

秒客网