我們已經(jīng)創(chuàng)建好了一個(gè)Vue項(xiàng)目工程,首先我們采用NPM的方式來安裝Vue。打開IDEA的終端面板,使用終端在根目錄下執(zhí)行如下指令來安裝vue router模塊:
npm install vue-router@4 -s
若安裝成功,項(xiàng)目的package.json文件中會(huì)自動(dòng)添加Vue Router的依賴。例如:
"dependencies": {
"axios": "^1.3.5",
"core-js": "^3.8.3",
"vue": "^3.2.13",
"vue-axios": "^3.5.2",
"vue-router": "^4.1.6"
},
成功添加依賴后,便可以對(duì)Vue Router進(jìn)行使用了。其中心思想是將定義好的Vue組件綁定到指定的路由,然后通過路由指定在何時(shí)何處渲染這個(gè)組件。
首先,在工程的components文件夾下新建兩個(gè)文件,分別命名為MyDemo1.vue和MyDemo2.vue,分別編寫如下代碼:
MyDemo1.vue
頁面一
MyDemo2.vue
頁面二