小男孩‘自慰网亚洲一区二区,亚洲一级在线播放毛片,亚洲中文字幕av每天更新,黄aⅴ永久免费无码,91成人午夜在线精品,色网站免费在线观看,亚洲欧洲wwwww在线观看

搜索
分享

【原】vue項(xiàng)目實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)

 算法與編程之美 2021-11-18

問(wè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)。

實(shí)驗(yàn)結(jié)果與討論：

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

2.以管理員身份進(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.新建一個(gè)views文件夾，并在該文件夾下新建home.vue,about.vue兩個(gè)組件

5.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')
   }
 ]
})

9.最后的運(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)功能。

實(shí)習(xí)編輯：衡輝

稿件來(lái)源：深度學(xué)習(xí)與文旅應(yīng)用實(shí)驗(yàn)室（DLETA）

    轉(zhuǎn)藏 分享 獻(xiàn)花（0）

    0條評(píng)論

    發(fā)表

    請(qǐng)遵守用戶 評(píng)論公約

    類似文章 更多