问题描述：

vue-router是前端开发中用来实现路由页面跳转的一个模块。下面小编将带来如何在已经创建好的vue-router项目基础下实现页面跳转。

实验结果与讨论 ：

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')

}

]

})

7.运行结果

如下：

问题 总结 ：

在本次的实验中，通过cmd命令提示符中安装vue-router，并配置router.js实现页面跳转功能。虽然已经成功实现简单的页面跳转功能，但是并未将router.js中的定义路由、定义组件等阐述清楚，后续将进行研究页面跳转功能。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• js中promise用法是什么？promise有什么优势？

  文本主要给大家介绍的是关于js中promise用法，有promise的概念、promise的创建、promise的优势等等。小编觉得是比较实用的，因此分享给大家作参考。

• node如何连接mysql并进行增删改查和事务操作

  本文主要介绍了node连接mysql查询事务处理的实现，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• Node中util模块的作用和基本用法是怎样的

  这篇文章主要为大家介绍了node.js中Util模块的教程示例详解，带大家充分的了解node.js的util模块，有需要的朋友可以借鉴参考下，希望能够有所帮助

• JavaScript缓动动画怎样实现封装，思路和代码是什么

  缓动动画原理：移动的像素慢慢减少，让效果看起来更柔和更美观，通过定时器加回调函数，实现动画效果以及更多具体功能，非常好用

• JS中关系运算符有多少，含义是什么

  javascript关系运算符有：1、“==”等于运算符；2、“===”全等运算符；3、“!=”不相等运算符；4、“!==”不全等运算符；5、“<”小于运算符；6、“>”大于运算符；7、“>=”大于等于运算符；8、“<=”小于等于运算符。