摘要：那么這個時候，我們需要在中，加載配置三個組件為復(fù)數(shù)。傳遞參數(shù)不需要在中進(jìn)行配置獲取參數(shù)其他的寫法帶查詢參數(shù)，下面的結(jié)果為拼到中

Vue Router是Vue.js的官方路由管理器，可以控制Vue單頁應(yīng)用的路由。

新版的vue-cli腳手架中，默認(rèn)default模式?jīng)]有router依賴，請選擇Manually select features后添加Router依賴后，選擇History模式。

vue-cli官網(wǎng)

    
    新建分類
    

我們可以利用標(biāo)簽來控制單頁應(yīng)用的跳轉(zhuǎn)路徑

    新建分類


export default {
  methods: {
    onCreate() {
      this.$router.push({
        path: "/categories/create"
      })
    }
  }
}

我可以使用this.$router方法進(jìn)行操作路由

執(zhí)行了push或跳轉(zhuǎn)操作還遠(yuǎn)遠(yuǎn)不夠，我們還在router.js上進(jìn)行路由（目錄）添加你需要對應(yīng)標(biāo)準(zhǔn)的地址以及地址包含component組件，不然編譯器不知道你要跳轉(zhuǎn)的實質(zhì)內(nèi)容是什么~

// 按需加載你需要的依賴

import Vue from "vue"
import Router from "vue-router"
import Main from "./views/main.vue"
import CategoryEdit from "./components/categoryEdit.vue"

Vue.use(Router)

export default new Router({
  mode: "history",   // history模式
  base: process.env.BASE_URL, // 環(huán)境內(nèi)部基礎(chǔ)地址
  routes: [
    {
      path: "/", // 當(dāng)?shù)刂吩诟夸浀臅r候，跳轉(zhuǎn)到Main的組件，這就是首頁
      name: "main",
      component: Main,
      children: [
        {
          path: "/categories/create",// 它是Main的子路由，默認(rèn)在首頁 調(diào)用CategoryEdit組件
          name: "categoryCreate",
          component: CategoryEdit
        },
        {
          path: "/categories/create", // 它是Main的子路由， 當(dāng)?shù)刂忿D(zhuǎn)到/categories/create上，則調(diào)用CategoryEdit組件
          name: "categoryCreate",
          component: CategoryEdit
        }
      ]
    }
  ]
})

剛剛在上面我們提高了「子路由」，然后我們開始了解下嵌套路由

/user/foo/profile                     /user/foo/posts
+------------------+                  +-----------------+
| User             |                  | User            |
| +--------------+ |                  | +-------------+ |
| | Profile      | |  +------------>  | | Posts       | |
| |              | |                  | |             | |
| +--------------+ |                  | +-------------+ |
+------------------+                  +-----------------+

這是官網(wǎng)的栗子，我們看來下更直觀。

我們要做的是改變這個網(wǎng)頁的子路由內(nèi)容組件人，讓我們看下代碼吧~

    
      
        
          
          
            新建分類
            分類列表
          
        
      
    
    
      
      
      
        
        
        
      
    


export default {
  methods: {
    onCreate() {
      this.$router.push({
        path: "/categories/create"
      })
    }
  }
}

當(dāng)我們在進(jìn)行執(zhí)行 $this.router.push 或者 跳轉(zhuǎn)的時候，
我們可以看到，push的路徑是「/categories/create」，回到router.js代碼上,我們可以看到，/categories/create是在/根目錄下的children里面，這就說明它是根目錄的子路由，子路由在子路由標(biāo)簽上進(jìn)行渲染。

如圖上，父容器HTML中有3個route視圖：

header

side

content

我們需要這三個都是動態(tài)的，都是需要根據(jù)需求加載不同的內(nèi)容。

那么這個時候，我們需要在router.js中，加載配置三個組件

components為復(fù)數(shù)。

import Header from "./components/header.vue"
import Side from "./components/side.vue"
import Content from "./components/content.vue"
import CategoryEdit from "./components/categoryEdit.vue"
import CategoryList from "./components/categoryList.vue"

 routes: [
    {
      path: "/",
      name: "main",
      components: {
        efault: Header,
        a: Side,
        b: Content
      },
      children: [
        {
          path: "/categories/create/:userid",
          name: "categoryCreate",
          component: CategoryEdit
        },
        {
          path: "/",
          name: "categoryList",
          component: CategoryList
        }
      ]
    }
  ]

在絕大分部情況下，我們需要利用同一個組件加載不同的數(shù)據(jù)內(nèi)容（比如詳情、用戶表信息等等），那我們怎么保證跳轉(zhuǎn)的唯一性呢?

這時候，我們需要利用路由命名方法

export default new Router({
  mode: "history",
  base: process.env.BASE_URL,
  routes: [
    {
      path: "/",
      name: "main",
      component: Main,
      children: [
        {
          path: "/categories/create/:userid", // 這是userid就是參數(shù)名
          name: "categoryCreate",
          component: CategoryEdit
        },
        {
          path: "/",
          name: "categoryList",
          component: CategoryList
        }
      ]
    }
  ]
})

  onCreate() {
      this.$router.push({
        name: "categoryCreate",
        params: { userid: 123 }
      })
    }

http://localhost:8080/categories/create/123

mounted() {
    // 注意是this.$route，是路由對象
    console.log("你獲取的參數(shù)是：" + this.$route.params); 
},

打印出來的數(shù)據(jù)

{
   userid: "123"
}

關(guān)于命名路由，還有其他的寫法

// HTML上
User

// .vue組件的其他寫法
const userId = "123"

router.push({ name: "user", params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123

// 這里的 params 不生效，必須使用上面的寫法
router.push({ path: "/user", params: { userId }}) // -> /user

這個和一般的url上拼接參數(shù)，獲取一樣，只不過router提供一個設(shè)置和獲取方法。

http://localhost:8080/categories/create/123?dataval=admin

    this.$router.push({
        name: "categoryCreate?ad=11",
        params: { 
          userid: 123 
        },
        query: {
          dataval: "admin"
        }
      })

不需要在router.js中進(jìn)行配置

let val = this.$route.query.dataval; // admin

Register


this.$router.push({path: `/categories/create/${userid}?admin=tre`});