一、路由配置

1. 路由的配置规则

import homepage from "@/pages/home.vue";
import homepage2 from "@/pages/home2.vue";
import homepage3 from "@/pages/home3.vue";
const routes = [
    {path:"/home",component:homepage,name:"home"},
    {path:"/home2",component:homepage2,name:"home2"},
    {path:"/home3",component:homepage3,name:"home3"},
]

2. 创建路由

const router = createRouter({
    history:createWebHistory(),
    routes:routes
})

3. 加载路由 app.use(router)

二、路由页面使用

1. <RouterLink to = "/home"></RouterLink> 2. <RouterLink :to = "{path:'/home2'}"></RouterLink> 3. <RouterLink :to = "{name:'home3'}"></RouterLink> 4. 跳转的显示 <RouterView></RouterView>

注意 RouterLink加上replace 属性后，跳转是不会返回的 <RouterLink :to = "{name:'home3'}"></RouterLink>