Vue-Router學習第二彈動態路由\懶載入\巢狀路由

zy簡單男孩發表於2021-08-11
Vue路由巢狀

在我們做專案時肯定會有出現動態路由：

舉個例子：

一個品種的商品頁面會有同類不同樣的商品就要在路由的後面加一個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可以不用寫‘/’

未完待續。。。

 

相關文章