Vue 路由设置

news2024/12/26 11:22:34

为了防止遗忘，记录一下用Vue写前端配置路由时的过程，方便后续再需要用到时回忆。

一、举个例子

假如需要实现这样的界面逻辑：

在HomePage中有一组选项卡按钮用于导航到子页面，而子页面Page1中有一个按钮，其响应事件是跳转到到一个全新的页面（不属于HomePage）。

二、实现过程

按照例子中的需求，HomePage和Page3都是占满整个窗口的页面，也就是说它们应该是同级的，所以直接在App.vue放置一个<RouterView />作为HomePage和Page3的路由出口，代码如下：

// App.vue

<script setup>
import { RouterView } from 'vue-router'
</script>

<template>
  <RouterView />
</template>

接下来在src目录下创建一个叫pages的文件夹，专门用来存放界面模板：

在pages文件夹下新建HomePage，放置了两个按钮，分别用于触发链接到子页面1和子页面2：

<script>
    import { useRouter } from 'vue-router';

    export default {
        setup() {
            const router = useRouter();

            const handleButton1 = () => {
                router.push("/page1");
            };

            const handleButton2 = () => {
                router.push("/page2");
            };

            return {handleButton1, handleButton2};
        },
    };

</script>

<template>
  <header>
    <h1>标题</h1>
  </header>

  <div>
    <span>
        <button @click="handleButton1">button1</button>
        <button @click="handleButton2">button2</button>
    </span>
  </div>
  <hr>

  <RouterView />
</template>

<style scoped>

</style>

在pages文件夹下新建Page1。不同于HomePage，此处使用了window.open函数来跳转到新页面，参数“_blank”可以帮助我们以新链接打开界面：

<script>
    export default {
        setup() {
            const handleButton = () => {
                window.open("/Page3", "_blank");
            };

            return {handleButton};
        },
    };

</script>

<template>
  <header>
    <h2>Page1</h2>
  </header>

  <div>
    <button @click="handleButton">button</button>
  </div>
  <hr>

  <RouterView />
</template>

<style scoped>

</style>

在pages文件夹下新建Page2：

<script setup>

</script>

<template>
  <header>
    <h2>Page2</h2>
  </header>

  <RouterView />
</template>

<style scoped>

</style>

在pages文件夹下新建Page3：

<script setup>
</script>

<template>
  <header>
    <h2>Page3</h2>
  </header>

  <RouterView />
</template>

<style scoped>

</style>

完成以上操作后，我们已经创建了四个界面模板，接下来在main.js中导入这四个界面模板，并配置它们的路由关系：

// main.js

import { createApp } from 'vue'
import App from './App.vue'
import {createRouter, createWebHistory} from 'vue-router'
import HomePage from './pages/HomePage.vue'
import Page1 from './pages/Page1.vue'
import Page2 from './pages/Page2.vue'
import Page3 from './pages/Page3.vue'

// 创建路由器
const router = createRouter({
    history: createWebHistory(),
    routes: [
        {path: "/", name: 'home', component: HomePage, redirect: "/Page1", // redirect表示默认路由到/Page1
            children: [
                {
                    path: "Page1",
                    name: '1',
                    component: Page1,
                },
                {
                    path: "Page2", 
                    name: '2', 
                    component: Page2,
                },
            ]
        },
        {
            path: '/Page3', name: '3', component: Page3,
        }
    ]
})

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

按照上面的配置，我们把Page1和Page2设置为了HomePage的子路由，这样的话Page1和Page2只会在HomePage.vue下的<RouterView />路由出口显示。

而因为我们把Page3设置成了和HomePage是同一等级的路由，所以Page3会在App.vue下的<RouterView />路由出口显示，从而达到了让Page3占满整个窗口显示的需求。