vue 如何实现页面切换

一、确保计算机已经安装了nodejs环境
1）window + r 输入cmd 打开终端
2）在终端中输入命令：node -v 出现：v12.14.0 版本号（v+数字）证明已将安装成功
二、首次安装vue-cli 时需要全局安装脚手架

1. 在终端中输入：npm install vue-cli -g
2. vue init weabpak 项目名
3. cd 项目名 输入npm install
4. 启动：npm run dev

三、在 APP.vue 组件内定义

<template>
  <div id="app">
    <div class="title">
      <router-link to="/" exact>页面A</router-link>
      <router-link to="/PageB" exact>页面B</router-link>
    </div>
    <router-view />
  </div>
</template>
<script>
export default {
  name: 'App'
}
</script>

<style scope>
.title{
    text-align: center
}
a {
  display: inline-block;
  padding: 5px 10px;
}
.router-link-active {
  background: red;
  color: white;
}
</style>

`
四、在src下新建一个views文件夹 在文件夹下新建一个pagesBbounces在此文件夹下新建两个组件
pageA.vue 和PageB.vue

```javascript
pageA.vue 组件
<template>
    <div class="pageA">
        <h2>页面A</h2>
    </div>
</template>
pageA.vue 组件
<template>
    <div class="pageB">
        <h2>页面B</h2>
    </div>
</template>

五、在router 文件夹下的index.js中
引入以上两个组件并在roters中配置路由

const PageA=()=>import("@/views/pagesBounce/pageA")
const PageB=()=>import("@/views/pagesBounce/pageB")

 export default new Router({
   routes: [ {
        path: '/',
        name: 'PageA',
        component: PageA,
        meta: {
            title: '页面A'
          },
    },{
        path: '/PageB',
        name: 'PageB',
        component: PageB,
        meta: {
            title: '页面B'
          },
    }]

此时在浏览器中输入http://localhost:8080/#/PageA

点击a跳转到A页面，点击B 跳转到B页面