用路由实现html页面跳转,vue-router 跳转页面(示例代码)

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

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

链接：http://pan.baidu.com/s/1nvqfA1V 密码：79bv

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

项目结构：

一、配置 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

}，

]

export default routers