---
# 6.1 Vue router
---
# 6.1 Vue router
# 初始化
一、npm init vue@latest 時選擇 router:true/
輸入 npm i vue-router 安裝

記得加 Hash

二、基本添加
1. App.vue 在要放頁面的位置加 router-view
2. 跳轉處加上(to='/路徑')(可做成變數版)
(這裡是使用者打的網址，跟mongoDB的post等網址不同)
產生能切換頁面的a標籤
1.button input:button a router-link都可
2.可用陣列生成，自帶變數進去

---
import { useRoute,useRouter } from 'vue-router'
const route = useRoute()
route 會有頁面資訊，ex:有變數的route，route.params.變數名

---

// 基本換網頁
const router = useRouter()

router.push('/guitar/teach')

this.$router.push({
    name: 'User',
    params: { 'sss' }
});
this.$router.push({
    path: '/user',
    query: { 
        id: 111, // 注意，傳送後會轉為字串 
        name: 'Alysa'
    }
})

---

3. src/router/index.js
createWebHistory=> createWebHashHistory
(不跳頁)
要的頁面放

import { createRouter, createWebHashHistory } from 'vue-router'
// 預先載入
import HomeView from '../views/HomeView.vue'
const router = createRouter({
  history: createWebHashHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView,
//         供資料給底部改標題
      meta: {
        title: '首頁'
      }
    },
    {
      path: '/guitar/:id',
      name: 'guitar',
//         事後載入
      component: () => import('../views/GuitarView.vue'),
      meta: {
        title: 'guitar'
      }
    },
    {
      path: '/404',
      name: 'notFound',
      component: () => import('../views/nN.vue'),
      meta: {
        title: '404'
      }
    },
    {
      path: '/:catchALL(.*)',
      name: 'all',
      redirect: '/404'
    }
  ]
})
//  改標題(偵測route變化)
router.afterEach((to, from) => {
  document.title = to.meta.title
})
export default router

取的ˊ目前路由資訊

另個 對路由做操作