Vue页面关联的两种主要方法并通过路由来切换不同的视图通常情况下路由文件的命名为router.js

作者：编程小白 | 发布时间：2025-07-09 |

Vue页面关联的两种主要方法

在Vue中，主要有两种方法可以将页面关联起来：使用Vue Router和通过组件传值。

一、使用Vue Router

Vue Router是Vue.js的官方路由管理工具，它允许我们创建单页面应用（SPA），并通过路由来切换不同的视图。

安装Vue Router

我们需要安装Vue Router。可以通过npm或yarn来安装：

npm install vue-router # 或者 yarn add vue-router

配置路由

安装完成后，需要在项目中配置路由。在目录下创建一个文件，并在其中配置路由：

const routes = [ { path: '/', component: Home }, { path: '/about', component: About }, { path: '/contact', component: Contact } ];

在主入口文件中引入路由

在文件中引入并使用路由：

import Vue from 'vue'; import VueRouter from 'vue-router'; import Home from './components/Home.vue'; import About from './components/About.vue'; import Contact from './components/Contact.vue'; Vue.use(VueRouter); const router = new VueRouter({ routes });

在App.vue中使用路由视图

在文件中使用，它会根据当前的路由显示相应的组件：

<router-view></router-view>

二、通过组件传值

在Vue中，组件传值主要有两种方式：父子组件传值和兄弟组件传值。

父子组件传值

父组件通过向子组件传递数据，子组件通过向父组件发送事件。

父组件	子组件
`<Child :message="parentMessage" @childEvent="handleChildEvent"></Child>`	`<template><button @click="sendEventToParent">Click Me</button></template>`

兄弟组件传值

兄弟组件传值可以通过事件总线（Event Bus）或状态管理工具（如Vuex）来实现。

事件总线

创建一个事件总线：

const EventBus = new Vue();

在兄弟组件中使用事件总线：

组件A	组件B
`EventBus.$emit('event-name', data)`	`EventBus.$on('event-name', callback)`

使用Vuex

Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

安装Vuex

安装Vuex：

npm install vuex # 或者 yarn add vuex

创建Store

创建Store：

import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); export default new Vuex.Store({ state: { message: 'Hello Vuex!' }, mutations: { updateMessage(state, newMessage) { state.message = newMessage; } } });

在主入口文件中引入Store

在主入口文件中引入Store：

import store from './store'; new Vue({ el: '#app', router, store, render: h => h(App) });

在组件中使用Vuex

组件A：

computed: { message() { return this.$store.state.message; } }

组件B：

methods: { updateMessage(newMessage) { this.$store.commit('updateMessage', newMessage); } }

三、总结

通过以上两种主要方法——使用Vue Router和通过组件传值，我们可以有效地将Vue页面关联起来。Vue Router适用于管理应用的导航和视图切换，而组件传值则适用于在不同组件之间传递数据。根据具体的需求和场景，我们可以选择合适的方法来实现页面之间的关联。

Vue页面关联的两种主要方法并通过路由来切换不同的视图通常情况下路由文件的命名为router.js