Vue 路由设置

为了防止遗忘，记录一下用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.jsimport { 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表示默认路由到/Page1children: [{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占满整个窗口显示的需求。

三、运行效果

        点击button1和button2可以分别链接到HomePage下的子页面Page1和Page2：

         点击Page1中的button可以跳转到占满整个窗口的Page3：