快捷導(dǎo)航

vue項(xiàng)目實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)的方法

更新時(shí)間：2021年11月18日 08:31:02 作者：衡輝

這篇文章主要給大家分享的是vue項(xiàng)目實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)的方法，vue-router是前端開(kāi)發(fā)中用來(lái)實(shí)現(xiàn)路由頁(yè)面跳轉(zhuǎn)的一個(gè)模塊。下面小編將帶來(lái)如何在已經(jīng)創(chuàng)建好的vue-router項(xiàng)目基礎(chǔ)下實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn),需要的朋友可以參考一下

1.創(chuàng)建一個(gè)vue-cli默認(rèn)項(xiàng)目(僅包含babel)

2.進(jìn)入創(chuàng)建文件

以管理員身份進(jìn)入創(chuàng)建的文件路徑內(nèi)，并運(yùn)行命令npm install vue-router –save

（如果已經(jīng)安裝好淘寶鏡像可運(yùn)行cnpm install vue-router–save）

3.檢查配置

在package.json里可以進(jìn)行檢查到是否已經(jīng)成功配置vue-router。

4.創(chuàng)建views文件夾

新建一個(gè)views文件夾，并在該文件夾下新建home.vue,about.vue兩個(gè)組件

5.設(shè)置APP.vue

如下設(shè)置：

<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.進(jìn)行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.運(yùn)行結(jié)果

如下：

問(wèn)題總結(jié) ：

在本次的實(shí)驗(yàn)中，通過(guò)cmd命令提示符中安裝vue-router，并配置router.js實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)功能。雖然已經(jīng)成功實(shí)現(xiàn)簡(jiǎn)單的頁(yè)面跳轉(zhuǎn)功能，但是并未將router.js中的定義路由、定義組件等闡述清楚，后續(xù)將進(jìn)行研究頁(yè)面跳轉(zhuǎn)功能。

到此這篇關(guān)于vue項(xiàng)目實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)的方法的文章就介紹到這了,更多相關(guān)vue項(xiàng)目實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: