【初学vue2, 它要怎么进行切换页面. 提供demo(路由router)】

vue2.x中页面切换

在 Vue.js 2.x 中，你可以使用 Vue Router 来进行页面之间的切换。Vue Router 是 Vue.js 官方的路由管理库，它可以帮助你实现单页应用（SPA）中的路由切换和状态管理。

下面是一个简单的示例，演示如何使用 Vue Router 实现页面之间的切换：

1.安装 Vue Router

首先，你需要安装 Vue Router 。可以通过 npm 或 yarn 进行安装：

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

2.创建路由对象

接下来，你需要创建一个路由对象，并定义路由规则。在这个示例中，我们将创建一个名为 router 的路由对象，并定义两个路由规则：

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/views/Home.vue'
import About from '@/views/About.vue'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
})

export default router

在这个示例中，我们使用 Vue.use(Router) 来安装 Vue Router，并定义了两个路由规则，分别映射到 / 和 /about 路径，并分别显示 Home 和 About 组件。

3.创建 Vue 实例

接下来，你需要将路由对象混入到 Vue 实例中，并将 Vue 实例挂载到 DOM 中。在这个示例中，我们将路由对象混入到一个名为 app 的 Vue 实例中，并将该实例挂载到 #app 元素上：

import Vue from 'vue'
import App from './App.vue'
import router from './router'

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

在这个示例中，我们将路由对象 router 添加到了 Vue 实例中，并将该实例渲染到 #app 元素上。

4. 创建路由组件

最后，你还需要创建路由组件，即 Home 和 About 组件。在这个示例中，我们将创建这两个组件，并将它们保存在 src/views 目录下：

<!-- Home.vue -->
<template>
  <div>
    <h1>Home</h1>
    <p>This is the home page.</p>
  </div>
</template>

<!-- About.vue -->
<template>
  <div>
    <h1>About</h1>
    <p>This is the about page.</p>
  </div>
</template>

在这个示例中，我们创建了 Home 和 About 两个组件，并分别显示了一个标题和一段文本。

5.添加路由链接

最后，你可以通过在模板中添加路由链接来实现页面之间的切换。在这个示例中，我们将在 App 组件中添加两个路由链接，用于切换到 Home 和 About 页面：

<!-- App.vue -->
<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div>
</template>

在这个示例中，我们使用 标签来创建路由链接，并将其分别绑定到 / 和 /about 路径上。同时，我们还使用 标签来显示当前路由对应的组件。

到这里，你就可以通过点击路由链接来实现页面之间的切换了。需要注意的是，路由链接和路由视图必须在同一组件中，否则路由切换可能会失败。