Vue-使用vue-router 跳转页面

最新推荐文章于 2025-03-19 20:46:00 发布

原创最新推荐文章于 2025-03-19 20:46:00 发布 · 829 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端 #界面跳转

网站专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何在Vue项目中通过vue-cli创建初始模板后，利用npm安装vue-router，然后在src目录下创建routers.js配置路由，包括引入组件、定义路由路径和组件映射。同时展示了Login.vue中的appDownload方法，点击后利用$router.push跳转到app-about.vue。最后在main.js中引入并配置VueRouter。

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