Vue3的vue-router4的用法

再vue-cil4的脚手架里面先下载vue-router4的路由插件

npm i vue-router@next

在main.js中全局使用如下：

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import {createRouter, createWebHashHistory} from 'vue-router'
import Dos from './components/Dos.vue'
const router= createRouter({
    history:createWebHashHistory(),
    routes:[
        {path:'/',component:Dos}
    ]
})

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

createRouter创建路由实例，
createWebHistory 创建一个 hash 历史记录
若要使用hash历史记录 使用createWebHashHistory。

获取路由信息
vue方法

import {getCurrentInstance} from "vue"
export default {
    setup() {
        const {ctx}  = getCurrentInstance()
        console.log(ctx.$router.currentRoute.value)
    }
};

router

<script>
import { useRoute, useRouter } from "vue-router";
export default {
  setup() {
    console.log(useRoute());
    console.log(useRouter().currentRoute.value);
  },
};
</script>