运行效果:
![](https://img.kancloud.cn/a6/06/a60683ff58a83b648b265419f22add1c_1107x791.png)
第一步:安装Vue Router依赖包
~~~
vue add router
~~~
如图所示:
![](https://img.kancloud.cn/20/b6/20b6113439f903a4d5863e8889385d70_989x698.png)
第二步:完善404路由
1. 在`src/router/index.js` `const routes` 尾部新增
```
{ path: '*', name: '404', component: NotFound }
```
2. 在`src/router/index.js` 导入 `NotFound`组件
```
import NotFound from '../views/NotFound.vue'
```
3. 创建`NotFound.vue`文件,并赋值如下内容
```
<template><div><h1>404</h1></div></template>
```
温馨提示:安装完毕后,并按以上步骤完善后,可以在浏览器中查看运行效果.
- 前言
- 购买
- 后端程序安装
- 前端配置
- 常见问题
- 目录结构
- 更新日志
- 从零开发Vue-Element-Admin基础后台
- 前言
- 更新记录
- 第一步:创建 Vue CLI项目
- 第二步:安装 Element-UI
- 第三步:安装 Vue Router
- 第四步:调整 App.vue文件
- 第五步:创建 Login.vue页面
- 第六步:头部 Header.vue组件
- 第七步:左菜单 leftMenu.vue组件
- 第八步:新建 Dashboard.vue页面
- 第九步:新建 Upload.vue页面
- 第十步:新建 List.vue列表页面
- 第十一步:调整 NotFound.vue 页面
- 最后:执行编译与部署到服务器