20190613-Vue Router 基礎（一）

什麼是 Vue Router？

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

如何快速上手？

vue-cli腳手架自帶Vue-Router依賴

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

vue-cli官網

在HTML進行路由設置

<el-dropdown-menu slot="dropdown">
    <router-link to="/profile/index">
    <el-dropdown-item>新建分類</el-dropdown-item>
    </router-link>
</el-dropdown-menu>

咱們能夠利用<router-link to="path">標籤來控制單頁應用的跳轉路徑

使用單文件組件內進行路由設置

<el-dropdown-menu slot="dropdown">
    <el-menu-item @click="onCreate">新建分類</el-menu-item>
</el-dropdown-menu>

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

我能夠使用this.$router方法進行操做路由

執行了push或<router-link>跳轉操做還遠遠不夠，咱們還在router.js上進行路由（目錄）添加你須要對應標準的地址以及地址包含component組件，否則編譯器不知道你要跳轉的實質內容是什麼~

router.js配置

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

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       | |
| |              | |                  | |             | |
| +--------------+ |                  | +-------------+ |
+------------------+                  +-----------------+

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

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

<el-container style="height: 500px; border: 1px solid #eee">
    <el-aside width="200px"
              style="background-color: rgb(238, 241, 246)">
      <el-menu router
               :default-openeds="['1', '3']">
        <el-submenu index="1">
          <template slot="title">分類</template>
          <el-menu-item-group>
            <el-menu-item @click="onCreate">新建分類</el-menu-item>
            <el-menu-item>分類列表</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header style="text-align: right; font-size: 12px">
      </el-header>
      <el-main>
        <!--這裏是咱們須要的子路由標籤-->
        <router-view>
        </router-view>
      </el-main>
    </el-container>
</el-container>

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

當咱們在進行執行 $this.router.push 或者 <router-link> 跳轉的時候，
咱們能夠看到，push的路徑是「/categories/create」，回到router.js代碼上,咱們能夠看到，/categories/create是在/根目錄下的children裏面，這就說明它是根目錄的子路由，子路由在子路由標籤<router-view>上進行渲染。

咱們還能夠利用<router-view>的name屬性進行跳轉制定的子路由容器

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

• header
• side
• content

咱們須要這三個都是動態的，都是須要根據需求加載不一樣的內容。

<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>

那麼這個時候，咱們須要在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
        }
      ]
    }
  ]

動態路由分配（如何給函數添加參數以及如何保證跳轉的惟一性）

在絕大分部狀況下，咱們須要利用同一個組件加載不一樣的數據內容（好比詳情、用戶表信息等等），那咱們怎麼保證跳轉的惟一性呢?

這時候，咱們須要利用路由命名方法

1.router.js 配置對應路徑以及名字

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

2.路由容器，執行跳轉操做

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

3.點擊跳轉，則地址變成

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

4.在子路由容器中獲取到參數名字和內容

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

打印出來的數據

{
   userid: "123"
}

關於命名路由，還有其餘的寫法

// HTML上
<router-link :to="{ name: 'categoryCreate', params: { userId: 123 }}">User</router-link>

// .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

GET請求-路由組件傳參數

這個和通常的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?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

<!--拼到path中-->
this.$router.push({path: `/categories/create/${userid}?admin=tre`});