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