Vue router 的 router-view 使用技巧

  1. Vue router 的 router-view 使用技巧
    1. 點擊 改變路徑
    2. 點擊 改變多層路徑
      1. 點擊 多個 router-view

Vue router 的 router-view 使用技巧

在此整理一些 vue-router 的 router-view 的使用技巧。

點擊 改變路徑

前端 router 主要是由網址決定要運作的 route ， route 決定要顯示的 component
常見的兩種手法如下

最簡單又常見的「一個 url → 一個 route → 一個 component」

用 HTML 裡記錄路徑

<router-link to="/user" ></router-link>

用 JavaScript 裡記錄路徑

const router = new VueRouter({...});
router.push('/user')

點擊 改變多層路徑

巢狀式的 route 又要怎麼控制要顯示的 component 呢？

1
2
3
4
5
6
7
8
9
10
11
12
const router = new VueRouter({
  routes: [
    {
      path: "/user/:id",
      component: User,
      children: [
        { path: "/user/foo/:key", component: Foo },
        { path: "/user/bar/:key", component: Bar }
      ]
    }
  ]
});

第一層 Component 的 router-view

1
2
3
4
5
6
<div id="app">
  <h1>Hello App!</h1>
  <router-link to="/user/foo/abcfoode">Go to Foo</router-link>
  <router-link to="/user/bar/abarbcde">Go to Bar</router-link>
  <router-view></router-view>
</div>

第二層 Component 的 router-view

1
2
3
4
5
6
7
const User = {
  template: `
  <div class="user">
    <h2>User {{ $route.params.id }}</h2>
    <router-view></router-view>
  </div>`
};

第三層 Components

1
2
3
4
5
6
7
8
9
10
11
12
const Foo = {
  template: `
  <div>
    foo {{ $route.params.key }}
  </div>`
};
const Bar = {
  template: `
  <div>
    bar {{ $route.params.key }}
  </div>`
};

點擊 多個 router-view

這個做法是一個 component 裡有兩個 router-view 那為了不讓 component 放錯位置，所以要對 router-view 命名

1
2
3
<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>

在一次 route 裡設定 指定多個 component，而且要對應到指定名稱。

1
2
3
4
5
6
7
8
9
10
11
12
const router = new VueRouter({
  routes: [
    {
      path: "/",
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    }
  ]
});
發表於 
tags:
  • { vue }
  • { vue-router }