1. 程式人生 > >每天一點點之vue框架開發 - vue-router路由進階(路由別名、跳轉、設置默認路由)

每天一點點之vue框架開發 - vue-router路由進階(路由別名、跳轉、設置默認路由)

跳轉 創建 mage 分享圖片 const oot ons dir info

路由別名 別名的作用:防止文件路徑泄露 使用之前顯示如下: 技術分享圖片

使用別名後就只會顯示到域名,後面的文件是不會顯示的,這就起到保護的作用了

在main.js中的路由中添加name來創建別名
const routes = [
    {path:‘/footer‘,name:footerLink,component:Footer}
]

在組件中的路由中通過對象屬性來實現路由

<router-link :to="{name:homeLink}">Mirror微申</router-link>

跳轉 1.跳轉到上一次瀏覽的頁面
this.$router.go(-1)

2.跳轉到指定路由
this.$router.replace(‘/footer’)
// 還可以通過別名跳轉
this.$router.replace({name:’footerLink’})
也可以通過push進行
this.$router.push(‘/footer’)
this.$router.push({name:’footerLink’})

設置默認路由
const routes = [
    {path:‘/‘,redirect:‘/home‘},
    {path:‘/home‘,name:homeLink,component:Home},
]

二級路由

每天一點點之vue框架開發 - vue-router路由進階(路由別名、跳轉、設置默認路由)