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可以不用寫‘/’

未完待續。。。