使用VueRouter实现页面的跳转

在vue中如果只引入<emp-view></emp-view>则只能看到EmpView.vue的页面，想看到其他页面并实现页面跳转需要引入VueRouter来实现路由，首先在main.js文件中写入两行代码：

import VueRouter from 'vue-router';

Vue.use(VueRouter);

如下：

在router文件夹下的index.js中添加代码：

import Vue from 'vue'
import VueRouter from 'vue-router'
//导入
Vue.use(VueRouter)

const routes = [
  {
    path: '/login',
    name: 'login',
    component: () => import('../views/pages/LoginView.vue')
  },
  {
    path: '/index',
    name: 'index',
    component: () => import('../views/pages/IndexView.vue'),
  },
  ...
  {
    path: '/',
    redirect: '/login' //表示重定向
  },
]
const router = new VueRouter({
  // mode:'history',
  routes
})

export default router

添加代码mode:'history',使网址路径中没有#

在App.vue中引入<router-view></router-view>组件，完整代码如下：

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {

}
</script>

<style>
</style>