Vue.js 是一款非常流行的前端 MVC JavaScript 庫,它提供了一個能夠簡化Web應用開發(fā)的漸進式框架,同時也支持幾乎所有現(xiàn)代瀏覽器。
在Vue中,路由是為每個不同頁面以及用戶交互提供所必需解決方案的一個重要部分,Vue Router就是Vue的官方路由解決方案。Vue Router 具有組建式路由的概念,每個路由映射一個組件。這些組件可以存在于不同的文件中,使得路由配置更加靈活。
Vue Router的使用,需要在Vue應用程序中安裝插件并為每個組件定義路由。安裝Vue Router后,通過在Vue應用程序中中引入和使用 Vue Router 插件,在 main.js 中這樣:
import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter)
這樣就可以使用Vue Router了。Vue Router 允許開發(fā)者使用router-link和router-view組件來完成路由鏈接。
router-link 組件提供了一個可以在模板/渲染函數(shù)中使用的用戶導航鏈接。其寫法如下:
Link
其中to 屬性指定了鏈接的目標路徑。
router-view 組件則是用來顯示匹配到的組件,被<router-link>
發(fā)出的導航請求觸發(fā)。其最簡單的用法就是直接把它放到組件的模板中。
Vue Router 引入了路由嵌套的概念,可以更靈活地定義頁面內(nèi)嵌套多個子頁面的路由。這個在實際應用中也非常常見。下面是一個簡單的例子:
const router = new VueRouter({ routes: [ { path: '/', component: Home }, { path: '/about', component: About, children: [ { path: 'company', component: Company }, { path: 'member', component: Member } ] } ] })
路由重定向也是Vue Router 中常用的一個功能,比如當你訪問一個沒有定義的友好頁面時,通過重定向可以訪問另一個你預定義的頁面。其寫法如下:
const router = new VueRouter({ routes: [ { path: '/a', redirect: '/b' } ] })
以上是Vue Router 鏈接和重定向的相關(guān)內(nèi)容,在實際項目中,路由鏈接和重定向是必備的功能,熟練掌握Vue Router的 API 和功能,不僅可以讓我們更加便捷地構(gòu)建應用,也能有效提高工作效率。