• 首先說明一點，以上是自己總結(jié)的雏门，有不對的地方鼎姐，歡迎小伙伴們可以指出來

• 1、vue3.0中的路由將vue2.0中的路由有的API進行了刪除船殉，有的進行了修改

• tag是我們可以改變標簽的屬性進行了刪除鲫趁，event也刪除了
• exact也進行了刪除
• 全局的404不再使用*鍵了，文檔有可查看
• 那么有的小伙伴說都刪除了利虫，我們應(yīng)該使用什么呢挨厚？那肯定是有的，想了解的朋友可以去官方看看文檔，我看了下，有一個新增的API就是v-slot仍侥，具體怎么使用，需要稍等會巢价，正在努力研究中
• 還有我們的組件路由守衛(wèi)中的beforeRouteEnter進行了刪除（我是沒找到，希望看到的小伙伴可以告訴我固阁，謝謝）
• 新增的兩個API是我們經(jīng)常會使用到的壤躲，很有用useRouter,useRoute后面會介紹到，別慌

• 2备燃、先看下簡單的語法碉克，跟vue2.0的一樣

<router-link to="/">首頁</router-link>
<router-view></router-view>//要在哪里顯示路由頁面，就在哪里進行標簽的書寫

• 3并齐、創(chuàng)建一個router.js路由文件

import { createRouter, createWebHashHistory } from "vue-router";
const routes = [
          {
              path:"/",
              name:"home",
              component:()=>import("../views/home.vue")
          }
        ]
const router = createRouter({
  history: createWebHashHistory(),
  routes
});
export default router;
//在main.js中進行引入棉胀，并進行掛載注冊到全局上

• 4、query和params進行傳參

• params傳參要在路由的js文件中進行配置

    const routes = [
        {
            path:'/home/:id',//這個id就是我們要使用params進行動態(tài)傳遞的參數(shù)
            name:home,
            component:Home
        }
    ]
    //! 在我們的頁面中直接進行寫就可以了
    <router-link to="/home/111">點擊跳轉(zhuǎn)到home頁面并傳參</router-link>
    //接受的時候
    vue2.0中this.$route.params.id
    vue3.0中import { useRoute } from 'vue-router'
    const route = useRoute()
    console.log(route.params.id);//111

• query傳參可以直接在標簽上寫

    <router-link to="/test?id=999">test</router-link>
    //接受的時候
    vue2.0中this.$route.query.id
    vue3.0中import { useRoute } from 'vue-router'
    const route = useRoute()
    console.log(route.query.id);//999

• 編程式導(dǎo)航的傳參冀膝，params使用name,query使用path

    vue3.0中import { useRouter } from 'vue-router'
    const route = useRouter()
        // ! query編程式導(dǎo)航傳參
            route.push({
                path:"/lianxi",
                query:{
                    id:666
                }
            });
            //! params編程式導(dǎo)航傳參
            route.push({
                name:'lianxi',
                params:{
                    id:666
                }
            });
            接受參數(shù)的方法跟上面的一樣
    vue3.0中import { useRoute } from 'vue-router'
    const route = useRoute()
    console.log(route.query.id);//999

• 注意：上面的編程式導(dǎo)航用到了上面提到的兩個API，一個是我們需要進行設(shè)置的霎挟，一個是我們用來讀取的

就像vue2.0中的this.$router.push()和this.$route.query.id等是不是很像呢

• 5窝剖、replaceApi

<router-link to="/home" replace></router-link>

route.push({
    path:"/home",
    replace:true
})

• 6、命名視圖

<router-view name="LeftSidebar"></router-view>
<router-view></router-view>
<router-view name="RightSidebar"></router-view>
//在路由的設(shè)置js文件中進行配置下
 const route = [
     {
         path:"/home",
         name:"home",
         components:{
             default:Home,//默認顯示home頁面
             LeftSidebar:LeftSidebar,//顯示左側(cè)頁面
             RightSidebar//顯示右側(cè)頁面
         }
     }
 ]

• 7酥夭、重定向和別名（可以有多個別名）

    route = [
        {
            path:"/",
            redirect:"/home"http://重定向
        },
        {
            path:"/test",
            name:"test",
            component:Test,
            alias:"/aa",//別名使用時直接使用aa就可以了
            alias:["/aa","/cc"],//此時用哪個都可以赐纱，這是多個別名
        }
    ]
    <router-link to="/aa"></router-link>

• 8脊奋、可以使用props的形式進行獲取路由傳遞的參數(shù)，這樣使路由有很好的一個靈活性

    //在路由配置的組件中疙描，我們進行配置
    const routes = [
        {
            path:"/aa/:id",
            name:"aa",
            component:Aa,
            props:true//要加這個
        }
    ]
    //在頁面中
    <router-link to= "/aa/666">點擊跳轉(zhuǎn)并傳參</router-link>
    //在aa的頁面中
    props:['id'],
    <template>
        {{id}}//直接就能獲取到我們傳遞過來的參數(shù)
    </template>

• 9诚隙、要是有多個命名視圖的時候，props也要寫多個

    const routes = [
        {
            path:"/use/:id",
            name:"use",
            components:{
                default:Use,
                slide:Slide,
                rightSlide
            },
            props:{
                default:true,
                slide:false,
                rightSlide:false
            }
        }
    ]

• 10起胰、全局路由守衛(wèi)（vue-router4.0中將next取消了久又，可寫可不寫，return false取消導(dǎo)航效五，undefined或者是return true驗證導(dǎo)航通過）

• router.beforeEach((to,from)=>{}),next是可選參數(shù)地消，可寫可不寫，return false是取消導(dǎo)航畏妖，如果返回值為true或者是undefined意味著通過驗證
• router.afterEach((to,from)=>{})
• console.log(to.fullPath);//1可以直接將當前的URL路徑及傳參打印出來

• 11脉执、路由獨享

    const routes = [
        {
            path:"/home",
            name:"home",
            component:Home,
            beforeEnter:(to,from) =>{
                //to是當用戶點擊進入當前頁面的時候,我們可以進行一些攔截設(shè)置
                //from當來自其他頁面進入當前頁面的時候，我們也可以進行攔截提示用戶
                alert('我是路由獨享守衛(wèi)＝浣佟０胍摹！')
            }
        }
    ]

• 12迅细、組件中的路由守衛(wèi)

import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router';
        onBeforeRouteUpdate((to,from)=>{//當前組件路由改變后巫橄，進行觸發(fā)
            console.log(to);
        })
        onBeforeRouteLeave((to,from)=>{//離開當前的組件，觸發(fā)
            alert('我離開啦')
        })

• 13疯攒、新增的一些方法（或者是之前就有的嗦随，而我沒有注意到）

• addRoute：新添加路由頁面(也可以添加子頁面路由)
• 添加一級路由

// todo 這是新添加的路由頁面，如果有重復(fù)的屬性敬尺，會先刪除前面的枚尼，添加后面的路由頁面
router.addRoute({
  path:"/router",
  name:"router",
  component:()=>import('../views/router.vue')
})

• 添加二級路由

// 1 添加子路由，第一個參數(shù)是父路由的name名砂吞，后面是子路由的數(shù)據(jù)
router.addRoute({ name: 'admin', path: '/admin', component: Admin })//1 父路由
router.addRoute('admin', { path: 'settings', component: AdminSettings })//1 子路由

• 如果添加的路由有點問題署恍，可以將下面的這句代碼加上看看

// * 如果上面添加的路由頁面沒有變化，那么就添加這行代碼
router.replace(router.currentRoute.value.fullPath)//替換當前路由頁面的路由

• removeRoute：刪除路由

router.removeRoute('router');

• 14蜻直、官方文檔中介紹了<router-link><router-view>中使用v-slot的寫法盯质，目前研究中，有會的大佬概而，請教教我呼巷，萬分感謝！Ｊ旯濉王悍！