vue项目实现页面跳转的方法

242 阅读 0 评论 160 点赞

我是靠谱客的博主开心枕头，最近开发中收集的这篇文章主要介绍vue项目实现页面跳转的方法，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1.创建一个vue-cli默认项目(仅包含babel)

2.进入创建文件

以管理员身份进入创建的文件路径内，并运行命令npm install vue-router –save

（如果已经安装好淘宝镜像可运行cnpm install vue-router–save）

3.检查配置

在package.json里可以进行检查到是否已经成功配置vue-router。

4.创建views文件夹

新建一个views文件夹，并在该文件夹下新建home.vue,about.vue两个组件

5.设置APP.vue

如下设置：

<template>

<div id="app">

<div id="nav">

<router-link to="/">home</router-link> |

<router-link to="/about">about</router-link>

</div>

<router-view/>

</div>

</template>

<style>

#app {

text-align: center;

margin-top: 60px;

}

</style>

6.进行main.js的配置

import Vue from 'vue'

import Router from 'vue-router'

import Home from './views/Home.vue'

Vue.use(Router)

export default new Router({

mode: 'history',

base: process.env.BASE_URL,

routes: [

{

path: '/',

name: 'home',

component: Home

},

{

path: '/about',

name: 'about',

component: () => import( './views/About.vue')

}

]

})