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文件中再進行調(diào)用
- 方式二：
直接在component獲取要跳轉(zhuǎn)頁面的位置
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了使用kbone解決Vue項目同時支持小程序問題，本文通過一個todo的例子跟大家詳細介紹,需要的朋友可以參考下2019-11-11
Element-UI?el-table對循環(huán)產(chǎn)生的空白列賦默認值方式
這篇文章主要介紹了Element-UI?el-table對循環(huán)產(chǎn)生的空白列賦默認值方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了vue中的事件加判斷條件如何進行選擇性點擊方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了解決vue-pdf查看pdf文件及打印亂碼的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
VuePress 可以讓您非常方便的在 Markdown 文檔中編寫 Vue 代碼，這篇文章主要介紹了VuePress 快速踩坑小結(jié)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
本篇文章主要介紹了在Vue.js中使用Mixins的方法，Vue的Mixins是非常實用的編程方式，可以使代碼變得容易理解，有興趣的一起來了解一下2017-09-09
這篇文章主要介紹了淺談vux之x-input使用以及源碼解讀，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
vue 組件中使用 transition 和 transition-group實現(xiàn)過渡動畫
本文給大家分享一下vue 組件中使用 transition 和 transition-group 設(shè)置過渡動畫,總結(jié)來說可分為分為 name 版, js 鉤子操作類名版, js 鉤子操作行內(nèi)樣式版，本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友參考下吧2019-07-07
這篇文章主要介紹了Vue中使用echarts的方法，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2018-02-02
這篇文章主要為大家詳細介紹了Vue組件中的自定義事件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02