Vue-router-next是一個基于Vue 3的官方路由管理器。它提供了一種可以非常方便地在Vue應用程序中進行導航控制的方法，并服從父級route的約束。

Vue-router-next擁有更加強大的功能，一些你熟悉的屬性和方法都會有所改變。

首先，你需要創建一個Vue Router實例：

import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
history: createWebHistory(),
routes: [
// routes go here
]
})

此處，我們使用createRouter方法來創建一個路由實例，createWebHistory則用于指定路由的模式。你可以通過createWebHistory和createWebHashHistory來創建不同模式的路由。其中，createWebHistory為history模式，而createWebHashHistory則是hash模式。

在這個路由實例中，你還需要指定該應用中所有路由的定義。你可以使用定義路由：

import { RouteRecordRaw } from 'vue-router'
const routes: Array= [
{
path: '/',
component: Home
},
{
path: '/about',
component: About
}
]

RouteRecordRaw接口定義一個單一的路由的格式。在此代碼中，我們定義了兩個路由：'/' 和 '/about'，并且分別指定了對應的組件。

接下來，你需要將Vue-router-next實例作為一個插件來安裝到你的Vue 3應用中：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router)
app.mount('#app')

在這個代碼中，我們創建了一個app實例，使用Vue-router-next，并將它掛載到指定dom元素上。

現在，你可以在組件中通過Router-link和Router-view來擁有一些路由的功能。

< template >< div class="container">
My App
Home
About