vue实现页面切换的两种方法

一种是通过vue-router切换页面，一种是通过v-if来切换页面。

1.vue-router的方法：

(1).安装Vue-Cli

npm install -g @vue/cli

(2).创建一个项目

vue create hello-world

(3).通过空格勾选上router、store、scss

系统会自动生成router.js文件，store.js文件

(4).新建几个vue文件

路由跳转有两种模式， 一种是历史模式：mode: 'history'，一种是hash模式：mode: 'hash'

首页

path: '/'

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: () => import(/* webpackChunkName: "about" */ './components/home.vue')
    }, 
    {
      path: '/cloudservices',
      name: 'cloudservices',
      component: () => import(/* webpackChunkName: "about" */ './components/cloudServices.vue')
    },
    {
      path: '/product',
      name: 'product',
      component: () => import(/* webpackChunkName: "about" */ './components/product.vue')
    }
         
  ]
})

2.通过v-if来切换页面

效果图：