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可以不用寫『/』

未完待續。。。

 

Tags:

VirMach 便宜 VPS

QNews

QNews