vue-router 路由

官方網(wǎng)址
vue-router 路由
路由是哑梳,實現(xiàn)在一個頁面中,跳轉(zhuǎn)到不同的頁面绘盟,會有歷史記錄鸠真。

NPM安裝

npm install vue-router

在模塊化中使用路由,需要

//導(dǎo)入Vue實例
import Vue from 'vue'
//導(dǎo)入路由
import VueRouter from 'vue-router'
//使用路由
Vue.use(VueRouter)

使用路由步驟
路由需要在main.js文件中創(chuàng)建龄毡,我們通常會重新創(chuàng)建一個文件來專門寫路由的實例和配置吠卷。
創(chuàng)建一個路由實例
我們需要把路由實例導(dǎo)出去,在main.js需要引入沦零,·import router from './router/index',路由需要在main.js中的vue實例中配置一下路由器對象,保證應(yīng)用的每個頁面都可以使用祭隔。--詳細請見官方網(wǎng)址

//這個是配置路由的文件
export default  new VueRouter({
    //定義路由器對象
    routes: [
        {
            //每一天路由信息,就是一個對象
            //*路徑
            path: '/home',
            // 名稱
            name: '首頁',
            //* 組件
            component: Home,
        },
        {
            path: '/List',
            name: '列表',
            component: List
        },
        {
            path: '/about',
            name: '關(guān)于',
            component: About
        },
        {
            path: '/news',
            name: '新聞',
            component: News
        },
    ]
})

在路由實例中路操,定義路由器對象疾渴,routes中是一個對象數(shù)組,每個對象中屯仗,都是一個路由信息搞坝,在對象中,有path name component中魁袜,分別代表的是路徑桩撮、名稱敦第、組件,在這三個中店量,pathcomponent定義的芜果, component是沒有 s 的,區(qū)別是垫桂,一個是全局組件注冊(s)师幕,和局部組件注冊.

怎么使用路由

路由視圖組件
路由視圖,用于顯示路由組件诬滩,當(dāng)瀏覽器的地址欄中切換到指定的路由路徑時霹粥,就會在 router-view中顯示對應(yīng)的路由組件。

 <router-view></router-view>

路由鏈接組件
路由鏈接疼鸟,用于跳轉(zhuǎn)路由后控,to屬性設(shè)置路由路徑

<router-link to="/home">首頁</router-link> 

<router-link> 跳轉(zhuǎn)其實就是相當(dāng)于瞄鏈接

編程式路由跳轉(zhuǎn)

this.$route
當(dāng)前路由的配置信息
this.$router
當(dāng)前路由器對象


我們可以影push()進行路由的跳轉(zhuǎn)

this.$router.push('/order')

push方法跳轉(zhuǎn)需要進行判斷,如果連續(xù)跳轉(zhuǎn)同一個路由空镜,就會報錯浩淘,如果跳轉(zhuǎn)的路徑跟當(dāng)前的路徑相同就不進行跳轉(zhuǎn)

if (this.$route.path !== "/about") {
        this.$router.push("/about");
     }

replace方法的跳轉(zhuǎn),是替換當(dāng)前的路由路徑吴攒,缺點是沒有歷史記錄张抄,在刷新頁面的時候,會出現(xiàn)頁面丟失當(dāng)?shù)那闆r

this.$router.replace('/about')

路由傳參

路由組件傳參 | Vue Router (vuejs.org)

1.params 參數(shù)

路由配置

{
    // 注意:這里的路由需要傳一個參數(shù)洼怔,路由可以傳多個參數(shù)
    path:'/city/:id',
    path:'/city/:id/:name',  //多個參數(shù)
    // 設(shè)置該選項為true署惯,組件可以通過props選項接收路由參數(shù)
    props:true,
    component:City
},
// *號,表示匹配不上的所有路由
{
    path:'*',
    component:Error404
}

router-link在要后面?zhèn)魅胂鄳?yīng)的值

<router-link to="/type/1001/nj">南京</router-link>

需要在 props: ["id",'name'],中配置相應(yīng)的名稱
$route返回的是當(dāng)前路由信息镣隶,它身上有一個params屬性极谊,該屬性里面保存的是當(dāng)前路由信息的參數(shù)。
v-html指令

2. query參數(shù)

路由地址安岂,采用query傳參方式:?參數(shù)1=XXX&參數(shù)2=XXX...
多個參數(shù)使用&符號連接

    <router-link to="/news/?id=1001">弘揚真正民主精神轻猖,共創(chuàng)人類美好未來</router-link>

通過$route.query獲取路由地址?后面的參數(shù)
this.$route.query 當(dāng)前路由下的參數(shù)

4. vue.config.js

// 引入nodejs內(nèi)置模塊path
let path = require('path')
// 注意:該配置文件中,只能使用commonjs模塊化語法
module.exports = {
    // 關(guān)閉 eslint-loader 語法檢查
    lintOnSave:false,
    // 配置devServer開發(fā)服務(wù)器
    devServer:{
        // 端口號
        port: 5566,
        // 自動打開
        open:true,
        // 靜態(tài)資源路徑
        // 注意:__dirname是nodejs的內(nèi)置變量域那,返回的是的當(dāng)前項目的絕對路徑
        contentBase: path.join(__dirname, "static")
    },
    // 用于配置原生的Webpack配置
    configureWebpack:{
        // 解析
        resolve:{
            // 定義路徑別名
            alias:{
                "@c":path.resolve(__dirname,'src/components'),
                "@p":path.resolve(__dirname,'src/pages'),
                "@a":path.resolve(__dirname,'src/apis'),
                "@u":path.resolve(__dirname,'src/utils'),
            }
        }
    }
}

vue.config.js文件相當(dāng)于webpack打包工具,在這里配置webpack

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末咙边,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子次员,更是在濱河造成了極大的恐慌样眠,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,681評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件翠肘,死亡現(xiàn)場離奇詭異檐束,居然都是意外死亡,警方通過查閱死者的電腦和手機束倍,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評論 3 399
  • 文/潘曉璐 我一進店門被丧,熙熙樓的掌柜王于貴愁眉苦臉地迎上來盟戏,“玉大人,你說我怎么就攤上這事甥桂∈辆浚” “怎么了?”我有些...
    開封第一講書人閱讀 169,421評論 0 362
  • 文/不壞的土叔 我叫張陵黄选,是天一觀的道長蝇摸。 經(jīng)常有香客問我,道長办陷,這世上最難降的妖魔是什么貌夕? 我笑而不...
    開封第一講書人閱讀 60,114評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮民镜,結(jié)果婚禮上啡专,老公的妹妹穿的比我還像新娘。我一直安慰自己制圈,他們只是感情好们童,可當(dāng)我...
    茶點故事閱讀 69,116評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著鲸鹦,像睡著了一般慧库。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上馋嗜,一...
    開封第一講書人閱讀 52,713評論 1 312
  • 那天完沪,我揣著相機與錄音,去河邊找鬼嵌戈。 笑死,一個胖子當(dāng)著我的面吹牛听皿,可吹牛的內(nèi)容都是我干的熟呛。 我是一名探鬼主播,決...
    沈念sama閱讀 41,170評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼尉姨,長吁一口氣:“原來是場噩夢啊……” “哼庵朝!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起又厉,我...
    開封第一講書人閱讀 40,116評論 0 277
  • 序言:老撾萬榮一對情侶失蹤九府,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后覆致,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體侄旬,經(jīng)...
    沈念sama閱讀 46,651評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,714評論 3 342
  • 正文 我和宋清朗相戀三年煌妈,在試婚紗的時候發(fā)現(xiàn)自己被綠了儡羔。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片宣羊。...
    茶點故事閱讀 40,865評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖汰蜘,靈堂內(nèi)的尸體忽然破棺而出仇冯,到底是詐尸還是另有隱情,我是刑警寧澤族操,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布苛坚,位于F島的核電站,受9級特大地震影響色难,放射性物質(zhì)發(fā)生泄漏泼舱。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,211評論 3 336
  • 文/蒙蒙 一莱预、第九天 我趴在偏房一處隱蔽的房頂上張望柠掂。 院中可真熱鬧,春花似錦依沮、人聲如沸涯贞。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽宋渔。三九已至,卻和暖如春辜限,著一層夾襖步出監(jiān)牢的瞬間皇拣,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評論 1 274
  • 我被黑心中介騙來泰國打工薄嫡, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留氧急,地道東北人。 一個月前我還...
    沈念sama閱讀 49,299評論 3 379
  • 正文 我出身青樓毫深,卻偏偏與公主長得像吩坝,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子哑蔫,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,870評論 2 361

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