Vue-使用vue-router 跳转页面

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

npm install vue-router --save

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

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

import appDownloadPage from "./views/app-about";
const routes = [
    {
        path: '/app-about',
        name: 'appDownloadPage',
        component: appDownloadPage,
    },
]

export default routes

在创建的 routers 对象中， path 配置了路由的路径，component 配置了映射的组件

需要注意的是，export default routers 必须写在文件底部，而且后面还需要接一空行，否则无法通过 ESlint 语法验证

3.部分Login.vue代码

......
<span @click="appDownload()">
            <Icon type="md-cloud-download" size="18"/>
            app下载
</span>
......
//下载app
    appDownload() {
      this.$router.push({name: 'appDownloadPage'});
   }

......

4.然后 main.js 也需要修改：

import VueRouter from 'vue-router'
......
let router = new VueRouter({
  routes: []
})
......

这样就实现了在login.vue中点app下载跳转到与Login.vue同级的app-about.vue