路由就是一組key-value的對(duì)應(yīng)關(guān)系。
多個(gè)路由，需要經(jīng)過路由器的管理。

首先yarn安裝路由：

yarn add vue-router

ts：創(chuàng)建一個(gè)路由器，并暴露出去
第一步，引入ceateRouter

import { createRouter,createWebHistory } from "vue-router";

import Home from "@/components/Home.vue";
import News from "@/components/News.vue";
import About from "@/components/About.vue";

第二步，創(chuàng)建路由器

const router = createRouter({
    history: createWebHistory(),//路由器工作模式
    routes:[
        {
        name:'shouye'//路由命名
        path:'/home',
        component: Home
        },
         {
        path:'/news',
        component: News
        },
         {
        path:'/about',
        component: About
        }
    ]
})

第三步，暴露出去

export default router

vue:展示到頁(yè)面上

<RouterView></RouterView>

實(shí)現(xiàn)路由的切換，active-class被激活的時(shí)候展示：

<RouterLink to="/home" active-class="active">首頁(yè)</RouterLink>
<RouterLink to="/news" active-class="active">新聞</RouterLink>
<RouterLink to="/about" active-class="active">關(guān)于</RouterLink>

注意：路由組件通常存放在pages或views文件夾，一般組件通常存放在components文件夾，通過點(diǎn)擊導(dǎo)航欄，視覺效果上“消失”了的路由組件，默認(rèn)是被銷毀掉的，需要的時(shí)候再去掛載。

to的兩種寫法：

<router-link active-class="active" :to="{ path: '/home' }">首頁(yè)</router-link>
<RouterLink to="/home" active-class="active">首頁(yè)</RouterLink>
<router-link active-class="active" :to="{ name: 'shouye' }">首頁(yè)</router-link>

兩種寫法是等價(jià)的，另外router-link和RouterLink寫法也是等價(jià)的

路由器工作模式：
1、history模式：
優(yōu)點(diǎn)是URL更加美觀，不帶有#，更接近傳統(tǒng)的網(wǎng)站URL，缺點(diǎn)是后期項(xiàng)目上線，需要服務(wù)器配合處理路徑問題，否則刷新會(huì)有404錯(cuò)誤。
vue2：mode:'history'
vue3:history:createWebHistory()
React: BrowserRouter

2、hash模式：
優(yōu)點(diǎn)是兼容性好，因?yàn)椴恍枰?wù)器處理路徑，確定是URL帶有#不太美觀，且在SEO優(yōu)化方面相對(duì)較差。
vue3：history: createWebHashHistory()

路由嵌套：

 {
            path: '/news',
            component: News,
            children:[
                {
                    path:'detail',
                    component:Detail
                }
            ]
        }

query參數(shù)：
1、拼參數(shù)

<router-link :to="`/news/detail?id=${news.id}&title=${news.title}&content=${news.content}`">{{ news.title }}</router-link>

2、對(duì)象形式

<router-link :to="{
                  path: '/news/detail',
                  query:
                 {
                     id: news.id,
                     title: news.title,
                     content: news.content
                    }
                  }">{{ news.title }}</router-link>

params參數(shù)（坑多，不推薦）：
創(chuàng)建路由的時(shí)候做好占位：

{
            path: '/news',
            component: News,
            children:[
                {
                    name:'xiangqing'，
                    path:'detail/:id/:title/:content',
                    component:Detail
                }
            ]
        }

第一種直接/拼接即可

<router-link :to="`/news/detail/${news.id}/${news.title}/${news.content}`">{{ news.title }}</router-link>

第二種不能用path，只能用name
路由的props三種寫法：
第一種寫法，將路由收到的所有params參數(shù)作為props傳給路由組件

props: true

defineProps(['id','title','content'])

第二種函數(shù)寫法，query可以返回一個(gè)對(duì)象

props(route) {
       return route.query
}

同樣

defineProps(['id','title','content'])

第三種，對(duì)象寫法，可以直接返回一個(gè)對(duì)象給路由

props：{
id：'001'
title:"",
content:""
}

replace屬性
默認(rèn)是push屬性，是有歷史記錄的，設(shè)置為replace屬性后不保存歷史記錄

<RouterLink replace to="/news" active-class="active">新聞</RouterLink>

編程式路由導(dǎo)航
脫離RouterLink實(shí)現(xiàn)路由跳轉(zhuǎn)，進(jìn)入首頁(yè)后，3秒跳轉(zhuǎn)某個(gè)路由

import { onMounted } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter()
onMounted(()=> {
    setTimeout(() => {
        router.push('/news')
    }, 3000);
})

push()內(nèi)寫法和to多種寫法一致

重定向
在進(jìn)入頁(yè)面后，會(huì)自動(dòng)定位到首頁(yè)
在routes最后寫入

 {
     path: '/',
     redirect: '/home'
 }