---
# System prepended metadata

title: 路由設定選項「active、切換畫面頁面自動滾動」 (7-10)
tags: [7. Router路由, Vue]

---

# 路由設定選項「active、切換畫面頁面自動滾動」 (7-10)
###### tags: `Vue`、`7. Router路由`
2022.3.10

#### 參考網址：https://next.router.vuejs.org/zh/api/#routeroptions

#### &emsp;&emsp;在 `const router` 內Vue Router官方也有提出不錯選項，可供程式撰寫使用，參考上述網址，以下會有兩項實作範例。
## 

### 範例一：添加 active 使當前路由能明顯顯示。
#### &emsp;&emsp;主要針對<router-link>動作。

```
const router = createRouter({
  history: createWebHashHistory(),
  linkActiveClass: 'active',
  routes,
});
```
![](https://i.imgur.com/RVUeXZ8.png)
    
**成果**
    
![](https://i.imgur.com/FyNed11.png)

### 範例二：指定特定網頁，畫面會自動滾至指定位置。
#### 1. 新增會滾動的頁面
    
![](https://i.imgur.com/99GkA8P.png)

#### 2. 更改App.vue頁面 (navbar固定於上、新增頂端間隔)
*  navbar固定於上
    
    ![](https://i.imgur.com/drTHV8z.png)

*  新增頂端間隔
    ![](https://i.imgur.com/HZqgHJz.png)

#### 3. 撰寫router滾輪函式

![](https://i.imgur.com/KjnB9Wc.png)


    