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能夠不用寫‘/’

未完待續。。。