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

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

新版的vue-cli腳手架中，默認default模式沒有router依賴，請選擇Manually select features后添加Router依賴后，選擇History模式。

vue-cli官網

    
    新建分類
    

我們可以利用標簽來控制單頁應用的跳轉路徑

    新建分類


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

我可以使用this.$router方法進行操作路由

執行了push或跳轉操作還遠遠不夠，我們還在router.js上進行路由（目錄）添加你需要對應標準的地址以及地址包含component組件，不然編譯器不知道你要跳轉的實質內容是什么~

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

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, // 環境內部基礎地址
  routes: [
    {
      path: "/", // 當地址在根目錄的時候，跳轉到Main的組件，這就是首頁
      name: "main",
      component: Main,
      children: [
        {
          path: "/categories/create",// 它是Main的子路由，默認在首頁 調用CategoryEdit組件
          name: "categoryCreate",
          component: CategoryEdit
        },
        {
          path: "/categories/create", // 它是Main的子路由， 當地址轉到/categories/create上，則調用CategoryEdit組件
          name: "categoryCreate",
          component: CategoryEdit
        }
      ]
    }
  ]
})

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

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

這是官網的栗子，我們看來下更直觀。

我們要做的是改變這個網頁的子路由內容組件人，讓我們看下代碼吧~

    
      
        
          
          
            新建分類
            分類列表
          
        
      
    
    
      
      
      
        
        
        
      
    


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

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

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

header

side

content

我們需要這三個都是動態的，都是需要根據需求加載不同的內容。

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

components為復數。

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
        }
      ]
    }
  ]

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

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

export default new Router({
  mode: "history",
  base: process.env.BASE_URL,
  routes: [
    {
      path: "/",
      name: "main",
      component: Main,
      children: [
        {
          path: "/categories/create/:userid", // 這是userid就是參數名
          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("你獲取的參數是：" + this.$route.params); 
},

打印出來的數據

{
   userid: "123"
}

關于命名路由，還有其他的寫法

// 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上拼接參數，獲取一樣，只不過router提供一個設置和獲取方法。

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

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

不需要在router.js中進行配置

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

Register


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