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