vue跳转下个页面关闭当前页面_Vue 爬坑之路（三）—— 使用 vue-router 跳转页面...

使用 Vue.js 做项目的时候，一个页面是由多个组件构成的，所以在跳转页面的时候，并不适合用传统的 href，于是 vue-router 应运而生。

有很多朋友找我要 demo，但是博客中的这个案例被我删掉了，我只好随手写了一个超简单的 demo，希望能有所帮助

链接: https://pan.baidu.com/s/1pMfi5tD  密码: pjwx

这次的实例主要实现下图的效果：

项目结构：

一、配置 Router

用 vue-cli 创建的初始模板里面，并没有 vue-router，需要通过 npm 安装

cnpm i vue-router -D

安装完成后，在 src 文件夹下，创建一个 routers.js 文件，和 main.js 平级

然后在 router.js 中引入所需的组件，创建 routers 对象

import Home from './components/home.vue'const routers=[

{

path:'/home',

name:'home',

component: Home

}，

{

path: '/',component: Home

}，

]

exportdefault rou