vue從入門到xx哨鸭,第三節(jié):vue.js路由使用

接文集上一篇(可以查看本文文集),已經(jīng)書寫了自己的組件多律,這里主要是路由的控制。

vue.js官方推薦使用官方插件vue-router

首先使用npm安裝此插件
npm install --save vue-router
安裝成功后活鹰,如下圖所示漏策,到目前為止派哲,安裝的版本為

vue-router

在上一篇里建立的test.vue,在這篇中新建一個(gè)test2.vue插件掺喻,無(wú)需在App.vue中調(diào)用芭届。


test2

即打開(kāi)這個(gè)頁(yè)面的時(shí)候應(yīng)該顯示的值為testValue2。

在main.js中調(diào)用和定義路由巢寡,其代碼如下所示喉脖。

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)
//開(kāi)啟debug模式
Vue.config.debug = true;

// 創(chuàng)建一個(gè)路由器實(shí)例
import test2 from './component/test2.vue'
import test1 from './component/test.vue'

const main={template:'<div>this is main page</div>'}
// 并且配置路由規(guī)則
const router = new VueRouter({
    mode: 'history',
    base: __dirname,
    routes: [
        { path: '/', name: 'main', component: main },
        { path: '/test', name: 'test', component: test1 },
        { path: '/test2', name: 'test2', component: test2 }
    ]
})

new Vue({
    el:'#app',
    router,
    render: h => h(App)
})

這里定義了一個(gè)常亮main作為打開(kāi)/目錄時(shí)顯示的文字,并且在路由為相應(yīng)的路由顯示相應(yīng)的組件抑月。

順便將上一節(jié)中的App.vue恢復(fù)树叽,并修改成如下圖所示。

<template>
    <div id="app">
        <h1>Named Routes</h1>
        <p>Current route name: {{ $route.name }}</p>
        <ul>
            <li><router-link :to="{ name: 'main' }">mian</router-link></li>
            <li><router-link :to="{ name: 'test' }">test</router-link></li>
            <li><router-link :to="{ name: 'test2' }">test2</router-link></li>
        </ul>
        <router-view class="view"></router-view>
    </div>
</template>

<script>
    export default {
        name: 'app',
        data () {
            return {}
        },
    }
</script>

此時(shí)谦絮,服務(wù)器應(yīng)該自動(dòng)刷新頁(yè)面题诵,顯示效果如下圖所示。

主頁(yè)
test
test2

done

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末层皱,一起剝皮案震驚了整個(gè)濱河市性锭,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌叫胖,老刑警劉巖草冈,帶你破解...
    沈念sama閱讀 221,635評(píng)論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異瓮增,居然都是意外死亡怎棱,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,543評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門绷跑,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)拳恋,“玉大人,你說(shuō)我怎么就攤上這事砸捏∶耍” “怎么了?”我有些...
    開(kāi)封第一講書人閱讀 168,083評(píng)論 0 360
  • 文/不壞的土叔 我叫張陵垦藏,是天一觀的道長(zhǎng)梆暖。 經(jīng)常有香客問(wèn)我,道長(zhǎng)掂骏,這世上最難降的妖魔是什么轰驳? 我笑而不...
    開(kāi)封第一講書人閱讀 59,640評(píng)論 1 296
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上滑废,老公的妹妹穿的比我還像新娘。我一直安慰自己袜爪,他們只是感情好蠕趁,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,640評(píng)論 6 397
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著辛馆,像睡著了一般俺陋。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上昙篙,一...
    開(kāi)封第一講書人閱讀 52,262評(píng)論 1 308
  • 那天腊状,我揣著相機(jī)與錄音,去河邊找鬼苔可。 笑死缴挖,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的焚辅。 我是一名探鬼主播映屋,決...
    沈念sama閱讀 40,833評(píng)論 3 421
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼同蜻!你這毒婦竟也來(lái)了棚点?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書人閱讀 39,736評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤湾蔓,失蹤者是張志新(化名)和其女友劉穎瘫析,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體默责,經(jīng)...
    沈念sama閱讀 46,280評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡贬循,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,369評(píng)論 3 340
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了傻丝。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片甘有。...
    茶點(diǎn)故事閱讀 40,503評(píng)論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖葡缰,靈堂內(nèi)的尸體忽然破棺而出亏掀,到底是詐尸還是另有隱情,我是刑警寧澤泛释,帶...
    沈念sama閱讀 36,185評(píng)論 5 350
  • 正文 年R本政府宣布滤愕,位于F島的核電站,受9級(jí)特大地震影響怜校,放射性物質(zhì)發(fā)生泄漏间影。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,870評(píng)論 3 333
  • 文/蒙蒙 一茄茁、第九天 我趴在偏房一處隱蔽的房頂上張望魂贬。 院中可真熱鬧巩割,春花似錦、人聲如沸付燥。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 32,340評(píng)論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)键科。三九已至闻丑,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間勋颖,已是汗流浹背嗦嗡。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 33,460評(píng)論 1 272
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留饭玲,地道東北人侥祭。 一個(gè)月前我還...
    沈念sama閱讀 48,909評(píng)論 3 376
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像茄厘,于是被迫代替她去往敵國(guó)和親卑硫。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,512評(píng)論 2 359

推薦閱讀更多精彩內(nèi)容

  • 本文作者 Jinkey(微信公眾號(hào) jinkey-love蚕断,官網(wǎng) https://jinkey.ai)原文鏈接 h...
    JinkeyAI閱讀 425,621評(píng)論 152 921
  • 「咲的日記」 5月20日欢伏。 今天是個(gè)特殊的日子。 加藤他們幾個(gè)放學(xué)后被老師叫到了辦公室談話亿乳,所以沒(méi)有找西野君的麻煩...
    齊懋閱讀 439評(píng)論 0 0
  • 我親愛(ài)的笑笑硝拧, 今早出門你對(duì)我感慨,你的人生毫無(wú)意義葛假,除了上課就是作業(yè)障陶。我只能對(duì)你笑笑,難怪有句話是這么說(shuō)的:快樂(lè)...
    Graciegu閱讀 217評(píng)論 1 2
  • 項(xiàng)目是有規(guī)定的完成時(shí)間,然而在實(shí)際執(zhí)行過(guò)程中带斑,項(xiàng)目總是超期鼓寺。在預(yù)估項(xiàng)目完成時(shí)間時(shí),大家都會(huì)不由自主的增加100...
    吳冰_007_1992閱讀 562評(píng)論 4 0