vue3的路由、路由传参、路由模式

        history模式

        vue2:mode:'history',
        Vue3:history:createWebHistory()

   hash模式

 vue2:mode:'hash',
 Vue3:history:createWebHashHistory()

   to 的两种跳转模式

 <RouterLink to="/index">   </RouterLink>
 <RouterLink :to="{path:'/index'}">   </RouterLink>
 <RouterLink :to="{name:'index'}">   </RouterLink>

     编程式导航 js跳转 需要用到 useRouter（整个应用的路由器）

            const router = useRouter()
             router.push('/index')   router.replace('/index')
            
            router.push({
                path:'/index',
                query:{
                    id:值
                })

  路由传参

     query参数
     第一种写法
     <RouterLink :to="`/inedx?id=${值}`">   </RouterLink>
            
      第二种写法
      <RouterLink 
            :to="{
                path:'/index',
                query:{
                    id:值
                }
            }">   
            </RouterLink>

      params参数   只能用name跳转    值传输 得在path占位
            <RouterLink
            :to="{
                name:'index',
                params:{
                    id:值
                }
            }">   
            </RouterLink>

 路由的 props配置

    第一种写法
            路由配置写了  props:true  在组件内可以使用  defineProps(['值'])  进行接收 只限params的值
            第二种写法 
            props(route){
                return route.query
            }
            在组件内可以使用  defineProps(['值'])  进行接收

            replace属性  清除之前的路由缓存
            <RouterLink replace to="/index">   </RouterLink>

             路由重定向  redirect