# [ 想入門，我陪你 ] Re Vue 重頭說起｜Day 18：命名路由與指定顯示區域
###### tags: `Vue`、`Re:Vue 重頭說起`、`Alex 宅幹嘛`
## [Named Routes](https://router.vuejs.org/guide/essentials/named-routes.html)
有時候幫路由命名比較方便，我們可以多給一個 name 屬性，注意 name 名稱不要重複
- 通常name取名比path短，而且 `/user/123` 的 `123` 想用程式操控就會使用物件，這樣就不用做字串組合這麼麻煩
```htmlmixed=
<body>
<div id="app">
<p>
<router-link to="/">home</router-link>
<router-link to="/page1">page1</router-link>
<router-link to="/page2">page2</router-link>
<router-link to="/user/123">user 123</router-link>
<router-link to="/user/profile/456">profile 456</router-link>
<!-- 有name後就多了一種操作路由器的方式，從原本用字串操作path的方式，改成用物件操作name -->
<router-link :to="{name: 'user', params: { id: 123 }}">user 123</router-link>
<button @click="$router.push({name: 'user', params: { id: 123 })">user 123</button>
</p>
</div>
</body>
<script>
const Index = { template: '<div>Index</div>' }
const Page1 = { template: '<div>Page1</div>' }
const User = {
template: '
<div>
User
<router-view></router-view>
</div>
'
}
const Profile = { template: '<div>Profile</div>' }
const Posts = { template: '<div>Posts</div>' }
const router = new VueRouter({
routes: [
{
path: '/',
component: Index,
// 多了 name 屬性去設定route名稱，記得寧稱不要重複
name: index
},
{
path: '/page1',
component: Page1,
name: page1,
},
{
path: '/page2',
component: Page2,
name: page2,
},
{
path: '/user/:id',
component: User,
name: user,
},
{
path: '*',
component: Error,
},
],
})
new Vue({
el: '#app',
router,
})
</script>
```
## [Named Views](https://router.vuejs.org/guide/essentials/named-views.html#nested-named-views) (27:00)
一般一個頁面只會有一個 router-view，但當同一層頁面有多個router-view時，需要透過name去做區隔，如下一個router-view 負責顯示 header模組，一個router-view 負責顯示 nav模組，一個router-view 負責顯示content 模組
預設不名字的 router-view 叫 default，且只能有一個 default
```htmlmixed=
<body>
<div id="app">
<router-link name="header">header</router-link>
<router-link name="nav">nav</router-link>
<router-link name="content">content</router-link>
</div>
</body>
<script>
const Header = {
template: `
<p>
<router-link to="/">home</router-link>
<router-link to="/page1">page1</router-link>
<router-link to="/page2">page2</router-link>
<router-link to="/user/123">user 123</router-link>
<router-link to="/user/profile/456">profile 456</router-link>
<router-link :to="{name: 'user', params: { id: 123 }}">user 123</router-link>
<button @click="$router.push({name: 'user', params: { id: 123 })">user 123</button>
</p>
`
}
const Index = { template: `<div>Index</div>` }
const Index = { template: `<div>Index</div>` }
const Index = { template: `<div>Index</div>` }
const Page1 = { template: `<div>Page1</div>` }
const Page2 = { template: `<div>Page2</div>` }
const router = new VueRouter({
routes: [
{
path: '/',
// component: Index,
// 3 個 router-view 控制 3 個區塊
components: {
default: Index,
header: Header,
nav: Index,
},
name: index
},
{
path: '/page1',
// component: Page1,
components: {
default: Page1,
header: Header,
nav: page1,
},
name: page1,
},
{
path: '/page2',
// component: Page2,
components: {
default: Page2,
header: Header,
nav: Page2,
},
name: page2,
},
{
path: '/user/:id',
component: User,
name: user,
},
{
path: '*',
component: Error,
},
],
})
new Vue({
el: '#app',
router,
})
</script>
```
> 如果你不喜歡用巢狀路由(nest route)，可以用這種 name view 方式(name route)
> name view 適合拿來做 light box(Ex: twitter 的範例 29:40)，當 light box 蓋上去時，網址改變，上一頁時，網址回復成上一頁的網址，light box 加到我的最愛或是重新整理頁面時，要確實真的有一頁面存在
#### 巢狀路由(nest route) vs Name路由(name route) 35:00
- 巢狀路由(nest route)難以共用元件
- name route 要在router定義比較多東西
## [Redirect and Alias](https://router.vuejs.org/guide/essentials/redirect-and-alias.html#redirect)
### Redirect
```javascript=
{
path: '/404',
component: Error,
},
{
path: '/page2',
name: 'page2',
redirect: '/404'
}
```
Q: Redirect 是 Push(有歷史紀錄) 還是 Replace(沒歷史紀錄) ？
A: Replace，只有一個歷史紀錄
> Redirect 常用到 導回首頁或是錯誤頁面
### Alias
多個網址指向同一個 Component，'/page11' 與 '/page1' 都是顯示 Page1 Component => Demo(50:30)
```javascript=
const Header = {
template: `
<p>
<router-link to="/page1">page1</router-link>
<router-link to="/page11">page11</router-link>
</p>
`
}
```
```javascript=
{
path: '/404',
component: Error,
},
{
path: '/page1',
name: 'page1',
component: page1,
alias: 'page11';
}
```
> 用途: FB 有短網址，也可以用 id 或是 暱稱 連到同一個 Profile Component 頁面
:::spoiler
An **alias** gives you the freedom to map a UI structure to an arbitrary URL, instead of being constrained by the configuration's nesting structure.
:::
Sign in with Wallet
Connect another wallet