一个最基础的vue-cli单页面程序

前期准备

看到这里的项目准备好后，把图片换成这段文字：

运行后看到：

安装vue-router

在终端输入npm install vue-router --save-dev来安装vue-router。

引入vue-router

在main.js里引入vue-router

---

模板里跳转模板

在src目录下新建routers目录>index.js文件

新建components->Login.vue

在界面里显示路由对应的组件：

然后在主函数里引入并使用自定义路由：


继续编写登陆模板(无验证)：

新建跳转成功模板(Index.vue)：

为Index.vue模板配置路由：

因为是在Login.vue模板里的登陆按钮跳转的模板，所以回去修改登陆模板：

this.$router.push("/index")

---

子模版、子路由

接下来编写Index的模板：

新建左中右模板：

index模板里使用左中右模板：

为左中右配置路由：