Vue CLI Router是一個Vue.js官方提供的路由管理器。使用Vue CLI Router可以輕松地實現單頁面應用多視圖之間的切換。Vue CLI Router的使用非常簡單,以下是一些常用的Vue CLI Router指令:
//安裝Vue CLI Router:npm install vue-router --save//創建Vue CLI Router實例:import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter)//定義路由:const routes = [ { path: '/home', component: Home }, { path: '/about', component: About } ]//創建路由實例并傳入‘routes’路由配置:const router = new VueRouter({ routes })//掛載Vue CLI Router實例到Vue實例中:new Vue({ router }).$mount('#app')
如上代碼所示,首先需要在項目中安裝Vue CLI Router,在main.js中創建Vue CLI Router實例并定義路由,然后再將Vue CLI Router實例掛載到Vue實例中,即可啟動Vue CLI Router成功。
除此之外,Vue CLI Router還提供了豐富的路由導航功能,包括:
router-link:用于在視圖之間進行導航。
<router-link to="/home">Home</router-link>
router-view:用于渲染視圖。
<router-view></router-view>
路由傳參:用于在路由跳轉之間傳遞參數。
//定義路由 const routes = [ { path: '/user/:id', component: User } ] //通過$route.params.id獲取路由參數 export default { computed: { userId () { return this.$route.params.id } } }
VUE CLI Router是Vue.js的一個非常重要組件,它可以幫助我們簡單快速地實現路由管理,并提供了豐富的路由導航功能,如果你還沒用過Vue CLI Router,建議嘗試一下。
上一篇vue安卓程序
下一篇python 數據擬合庫