Vue Router是Vue.js官方提供的路由管理插件,可實現SPA(單頁應用)中的路由管理和頁面切換,使應用的用戶界面和 URL 保持同步。下面是如何安裝Vue Router。
//使用npm安裝Vue Router npm install vue-router --save
在安裝Vue Router之前,需要安裝Vue.js。下面是如何在Vue.js項目中配置Vue Router。
//在main.js中導入Vue Router和App.vue組件,并掛在Vue實例中 import Vue from 'vue' import App from './App.vue' import Router from 'vue-router' Vue.use(Router) Vue.config.productionTip = false const router = new Router({ routes: [ { path: '/', name: 'home', component: Home }, { path: '/about', name: 'about', component: About } ] }) new Vue({ el: '#app', router, render: h =>h(App) })
上面的代碼中,定義了兩個路由:‘/’和‘/about’,分別對應Home和About組件。通過router實例掛在Vue實例中,使路由生效。
現在就可以在Vue.js組件中使用Vue Router了。下面是如何在組件中跳轉路由。
//在組件中通過$router.push()方法實現路由跳轉 $router.push('/about')
通過以上方法,即可在Vue.js項目中成功安裝Vue Router并實現路由跳轉。
下一篇css3 滑動流暢