目錄

一 Router(路由)

1.作用

2.實現步驟

3.注意

---

一 Router(路由)

1.作用

? ? ? ? Router又叫做路由，簡單來說，就是用來實現vue的頁面之間跳轉的。

? ? ? ? 我們都知道，使用vue必然會涉及到很多個組件，也就是頁面，而頁面之間肯定需要切換，比如我點擊一個按鈕就需要切換另外一個組件(頁面)，這就是路由的作用。

? ? ? ? 而且我們以前學過重定向等，也是頁面跳轉，我覺得區別就在于，路由是局部的頁面切換。就是不會改變url重新加載一個網頁，而是在一個網頁上面顯示不同的組件，你甚至可以控制這個新的頁面切換在哪個位置。

2.實現步驟

?①首先你需要創建一個vue/vite項目，然后在終端下載router

# npm安裝
npm i vue-router
#yarn安裝
yarn add vue-router

下載完成后，你可以在你的項目的node_modules目錄下面看見vue-router目錄：

② 你需要在src目錄下面創建一個router文件夾，再在router文件夾下面創建一個index.js文件

③ 然后你需要在index.js文件中配置路由的信息，包括導入，配置組件路徑，暴露路由等步驟，這這里我將簡化后的模板總結出來了，可以直接導入按需求做修改

//vue-router配置文件
//1.從vue-router導入createRouter() 創建路由器對象
import { createRouter, createWebHistory, createWebHashHistory} from 'vue-router'//2.配置路由規則: 給組件綁定url
const routes = [//默認路由{path:'/',//重定向redirect:'/index'},{path: "/index",component: ()=>import('../views/index.vue'),name:'indexPage',children:[  //配置子級路徑{// 這是resful風格的url寫法path:'/infor/:id' , component:  ()=>import('../views/information.vue'),name:'infor',},]},//配置404的組件{path:'/:pathMatch(.*)*', component:  ()=>import('../views/NotFound.vue'),name:'notFound',}
];//3.創建路由器對象
const router = createRouter({routes,  //路由規則history:  createWebHashHistory(),linkActiveClass:'active'});
//4. 把路由器對象暴露出去  其他組件文件,導入
export default router;

其實1，3，4步都是一樣，就第二步配置路由需要按照自己修改，所以這里解釋一下這里面的信息：

④ 在main.js文件里面導入router并且掛載。

⑤ 我們在src目錄下面創建一個views文件夾，在下面創建我們需要的vue組件

?⑥ 最后我們就可以按照需求通過路由實現各種組件的切換

3.注意

1.當我們使用resful路徑去定位路由的時候，需要注意以下幾點（含參數）：

① 這是定位的寫法：

② 配置路由的信息，path需要這樣寫：

③ 我們在對應的組件上，獲取傳來的id使用如下方式(區別傳統路徑獲取id方式):

2.當我們使用傳統帶參數路徑去定位路由的時候，需要注意以下幾點（區別resful）：?

① 這是定位的寫法：

② 配置路由的信息，path需要這樣寫：

③ 我們在對應的組件上，獲取傳來的id使用如下方式(區別resful路徑獲取id方式):