Vue-router中path的設(shè)置方式
Vue-router設(shè)置path
最開(kāi)始死活不知道是按照什么個(gè)原則去設(shè)置路徑的，一直以為，這個(gè)設(shè)置的路徑是有一個(gè)相對(duì)路徑的。
導(dǎo)致引用的時(shí)候一直錯(cuò)。
path的路徑設(shè)置是自己直接設(shè)置的，不管它在哪里，自己都可以定義他的路徑名，而router-link引用的時(shí)候，，那個(gè)路徑就是你自己設(shè)置的，自己設(shè)置的相對(duì)路徑（邏輯路徑）。
不存在他文件在哪的路徑問(wèn)題。
routes: [
// {
// path: '/',
// name: 'HelloWorld',
// component: HelloWorld
// },
// {
// path: '/',
// name: 'text',
// component: text
// },
{
path: '/firstview', //自己設(shè)置
component: firstview, //對(duì)應(yīng)組件
},
{
path: '/secondview',
component: secondview,
}
]
<router-link to='firstview'>first</router-link><br> //引用的路徑和其相對(duì)應(yīng)
<router-link to='secondview'>second</router-link>
<router-view/>
Vue router中path和component的作用
path是路由參數(shù)，當(dāng)url路徑匹配到當(dāng)前路由參數(shù)時(shí)，就會(huì)跳轉(zhuǎn)到component所對(duì)應(yīng)的頁(yè)面組件
在本例子里面：當(dāng)url地址是只有/的時(shí)候，自動(dòng)跳轉(zhuǎn)到Home這個(gè)組件頁(yè)面。相當(dāng)于通過(guò)path的信息跳轉(zhuǎn)到對(duì)應(yīng)的component頁(yè)面。
component是獲取跳轉(zhuǎn)頁(yè)面的地址
- 方式一：
和引入組件一樣 先把要跳轉(zhuǎn)的頁(yè)面引入router js文件中再進(jìn)行調(diào)用
- 方式二：
直接在component獲取要跳轉(zhuǎn)頁(yè)面的位置
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章主要介紹了Vue中render函數(shù)的使用方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
這篇文章主要介紹了Vue-組件自定義事件的綁定和解綁，文中有詳細(xì)的圖文實(shí)例，對(duì)學(xué)習(xí)或工作有一定的參考價(jià)值，需要的小伙伴可以閱讀下2023-05-05
這篇文章主要為大家詳細(xì)介紹了Vue2幾種常見(jiàn)開(kāi)局方式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-09-09
在Vue中用canvas實(shí)現(xiàn)二維碼和圖片合成海報(bào)的方法
這篇文章主要介紹了在Vue中用canvas實(shí)現(xiàn)二維碼和圖片合成海報(bào)的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
Vue?Input輸入框自動(dòng)獲得焦點(diǎn)的有效方法
我們有時(shí)候會(huì)遇到要輸入框自動(dòng)獲取焦點(diǎn)的情況,下面這篇文章主要給大家介紹了關(guān)于Vue?Input輸入框自動(dòng)獲得焦點(diǎn)的簡(jiǎn)單方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
這篇文章主要介紹了vue3.2中的vuex使用詳解,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
基于vue中對(duì)鼠標(biāo)劃過(guò)事件的處理方式詳解
今天小編就為大家分享一篇基于vue中對(duì)鼠標(biāo)劃過(guò)事件的處理方式詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
這篇文章主要介紹了Vue和React的區(qū)別，畢竟是兩個(gè)框架，不像兩個(gè)?API，要說(shuō)細(xì)節(jié)上的區(qū)別就太多太多了，本文就簡(jiǎn)單的帶大家說(shuō)說(shuō)Vue?和?React?的區(qū)別,需要的朋友可以參考下2023-05-05
vue打包相關(guān)細(xì)節(jié)整理(小結(jié))
這篇文章主要介紹了vue打包相關(guān)細(xì)節(jié)整理(小結(jié)),小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
Vue組件庫(kù)Element-常見(jiàn)組件表格示例代碼
對(duì)于Element組件的使用,最主要的就是明確自己想要達(dá)到的效果,從官網(wǎng)中將對(duì)應(yīng)代碼復(fù)制粘貼即可,最重要的是要讀懂不同組件官網(wǎng)中提供的文檔,以便實(shí)現(xiàn)自己想要的效果,本文給大家介紹Vue組件庫(kù)Element-常見(jiàn)組件表格,感興趣的朋友一起看看吧2023-10-10