website link
I have been learning VUE by myself recently and want to use VUE to make something. Then I found an example of a personal website on the Internet. I wanted to implement the part of the website where I click on the article title to enter the article details. Is it possible to use vue-router?
Please give me your opinions, thank you!
擁有18年軟件開發(fā)和IT教學(xué)經(jīng)驗(yàn)。曾任多家上市公司技術(shù)總監(jiān)、架構(gòu)師、項(xiàng)目經(jīng)理、高級(jí)軟件工程師等職務(wù)。 網(wǎng)絡(luò)人氣名人講師,...
If I were asked to do it, I would use router, because the details of different articles are generally consistent in style, so I usually write a detail component. For the problem of passing values, I usually pass the article id. I will have it. About three methods
Splice the request parameters into the url, either as path or param
Manage via bus
Save to vuex for management
Use vue-router, you can add a click event, and then call this.$router.push method to jump the route, and you can also pass parameters.
Give me an example:
Article title click event:
//name是路由的名字也可以用path,query中是參數(shù),放在url中
this.$router.push({name: 'MemberMenu', query: {id: 233, title: 'hello'}})
//url: xxx.com/MemberMenu?id=233&title=hello
Get parameters from article details page:
// 獲取url參數(shù)
getUrl (name) {
let reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
let r = window.location.search.substr(1).match(reg)
if (r !== null) {
// 解決亂碼問題
return decodeURIComponent(decodeURI(r[2]))
}
return null
}