vue项目实现页面跳转

算法与编程之美

发布于 2021-11-23 11:07:37

1.1K0

发布于 2021-11-23 11:07:37

文章被收录于专栏：算法与编程之美算法与编程之美

问题描述：

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文件夹，并在该文件夹下新建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')
   }
 ]
})

9.最后的运行结果如下：