Hello大家好！我是Cathy海希。今天是我學(xué)習(xí)編程的第74天。

內(nèi)容導(dǎo)讀

「Shape of Me」是為了我的身體 ?

「Daily Stoic」是為了我的心靈 ??♀?

「Coding Baby」是為了我的大腦 ?

Shape of Me

雨后天氣好涼爽！今天計(jì)步器久違地達(dá)到了10,000步以上?

Daily Stoic

?

Don't confuse education with intelligence. Most schools serve to educate us just enough to believe what we've been taught and not enough to think for ourselves.

?

學(xué)歷不代表聰明，因?yàn)榇蟛糠值膶W(xué)校不教我們?nèi)绾握嬲秊樽约核伎肌?/p>

Learn how to educate yourself.

Coding Baby

今天讓我來總結(jié)一下如何做到點(diǎn)擊新增加的標(biāo)簽就可以跳轉(zhuǎn)其編輯頁面。

基本步驟

• 添加路由，在path里用:xx(名稱)占位，再去寫相對應(yīng)的組件；(f***調(diào)試大法亮了?)

• 在組件里進(jìn)行數(shù)據(jù)獲取的設(shè)置

進(jìn)入某個(gè)路由后，如果需要從服務(wù)器獲取數(shù)據(jù)的話，有兩種方式：1. 導(dǎo)航完成之后獲取 和 2. 導(dǎo)航完成之前獲取。我們現(xiàn)在用第1種方式來做。

?

導(dǎo)航完成之后獲取：先完成導(dǎo)航，然后在接下來的組件生命周期鉤子中獲取數(shù)據(jù)。在數(shù)據(jù)獲取期間顯示“加載中”之類的指示。

?

首先通過$route.params.id 獲得id，然后去看這個(gè)id在不在現(xiàn)有的數(shù)據(jù)里(這里的id是我們在第1步里面自定義的名稱)；

不在的話就通過 $router.replace('/404')，轉(zhuǎn)跳到404頁面。這里值得注意的是，為了防止用戶不能回退，我們用replace而不是push。

• 設(shè)置router-link

?

router-link組件支持用戶在具有路由功能的應(yīng)用中 (點(diǎn)擊) 導(dǎo)航。通過 to 屬性指定目標(biāo)地址。

?

這邊的標(biāo)簽我們本來是用ol、li結(jié)構(gòu)來做的，但是想要實(shí)現(xiàn)跳轉(zhuǎn)的目的，我們用router-link組件來改造一下(之前的ol改成div做wrapper就好。)。to跳轉(zhuǎn)至對應(yīng)id頁面。

route&router的區(qū)別

• $route是用來獲取路由信息的；
• $router是路由器本身，做一些跳轉(zhuǎn)的操作。

// Home.vue
export default {
computed: {
username() {
// 我們很快就會看到 `params` 是什么
return this.$route.params.username
}
},
methods: {
goBack() {
window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/')
}
}
}

mindset

一開始學(xué)習(xí)Vue的時(shí)候我有點(diǎn)暈頭轉(zhuǎn)向: 一下子在這個(gè)組件里寫，一下子又跳到另一個(gè)組件里，但是漸漸地通過整理、回顧，便可以看清里面的邏輯關(guān)系了。根本沒有什么天大的難題，一切都是來源于生活，只要有常識，人人都可以學(xué)好?

總結(jié)

以上是生活随笔為你收集整理的no route to host什么意思_Day 74：Vue里的route和router的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。