Vue项目中路由的基本使用

1. 安装vue-router库

将vue-router库安装到项目中，执行命令：

npm install vue-router -S

2. 配置路由映射

在src/router目录下，创建一个index.js路由映射文件，内容如下：

import Vue from 'vue'
import VueRouter from 'vue-router'
// 安装路由插件
Vue.use(VueRouter)
// 路由映射表
const routes = [
{
path: '/',      // 默认加载首页相关的组件
component: () => import('@/components/HelloWorld'),
   },
   {
path: '/home',
redirect: '/'   // 重定向到首页
   },
   {
path: '/user/page1',
name: 'page1',
component: () => import('@/views/test/page1'),
   }
]
const router = new VueRouter({
// 使用HTML5的history模式，该模式下可以去除路径中的#号
mode: 'history',
routes: routes
})
// 重写路由的push方法,解决多次调用同一个push方法出现的问题
const routerPush = VueRouter.prototype.push
VueRouter.