npm i vue-router@next

// 导入vueRouter
import { createRouter, createWebHistory } from 'vue-router'

// 创建router实例
const router = createRouter({
    history: createWebHistory(),
    routes: [
        { path: '/', component: HelloWorld },
        { path: '/todos', component: Todos },
    ]
})

createApp(App).use(router).mount('#app')

// 添加根路由
router.addRoute({
        name: 'about',
        path: '/about',
        component: () =>
            import ('./components/About.vue')
    })
// 添加子路由
router.addRoute('about', {
    path: '/about/info',
    component: {
        render() {
            return h('div', "Info page")
        }
    }
})

import { useRouter, useRoute } from "vue-router";

setup() {
    const state = reactive({
      timer: null,
    });
    const router = useRouter();
    const route = useRoute();
    onMounted(() => {
      state.timer = setInterval(() => {
        unref(router).push({
          path: "/about",
          query:{time: new Date().getTime() }
        });
      }, 1000);
    });
    onUnmounted(() => {
      clearInterval(state.timer);
    });
    // 监听路由参数变化
    watch(
      () => route.query,
      (query) => {
        console.log(query);
      }
    );
    // 路由守卫
    onBeforeRouteLeave((to,from) => {
        const answer = window.confirm("确认离开当前页面吗？");
        if(!answer){
            return false;
        }
    })
    return {
        router,
        route
    }
}

<template>
  <div :class="{ active: isActive }" @click="navigate">{{ route.name }}</div>
</template>

<script>
import { RouterLink, useLink } from "vue-router";
export default {
  props: {
    ...RouterLink.props,
  },
  setup(props) {
    // 使用useLink获取路由信息
    const { route, href, isActive, isExactActive, navigate } = useLink(props);

    return { route, isActive, navigate };
  },
};
</script>

<style  scoped>
.active{
    background: chartreuse;
}
</style>

// 使用组件
<nav-link to="/"></nav-link>
<nav-link to="/todos"></nav-link>
<nav-link to="/about"></nav-link>

<router-view v-slot="{ Component }">
    <keep-alive>
      <component :is="Component" ></component>
    </keep-alive>
  </router-view>

// 新方式获取
router.currentRoute.value

// 实现首屏前的动画
app.use(router)
router.isReady().then(() => app.mount('#app'))

// 新方式获取parent
const parent = this.$route.metched[this.$route.metched.length - 2]

createRouter({
	strict: Boolean,
    sensitive: Boolean
})

// befor
history.pushState(myState, '', url)
// now
router.push(url)
// or
history.replaceState({...history.state, ...myState}, '')

// befor
history.replaceState({}, '', url)
// now
histoty.replaceState(history.state, '', url)

// 可以填空数组
createRouter({routes:[]})

try{
    router.push({name:'abouts'})
}catch{

}