vue路由的,基本用法

2022-06-23 21:33:16 字數 1068 閱讀 1143

第一步:安裝路由

npm  install  router

第二步:新建路由,單獨資料夾

1、最好新建router名稱的資料夾,位置放在和pages一起

2、router資料夾下,新建index.js檔案

第三步:引入需要的外掛,和元件,(在剛新建的index檔案裡)

1、引入vue,和路由router(路由一定別忘了使用它)

import vue from 'vue';

import vuerouter from 'vue-router';

vue.use(vuerouter);

2、引入配置的元件

import loginpage from '../pages/loginpage';

import mainpage from '../pages/mainpage';

import welcomepage from '../pages/welcomepage';

import categorypage from '../pages/categorypage';

import bookpage from '../pages/bookpage';

3、匯出router模組

// 第一種寫法:直接匯出

export default new router(,

// ,

// ]});

// 第二種寫法:變數賦值式

export default new vuerouter();

4、main.js裡引入,router模組

import router from './router';

5、根元件,註冊router模組

new vue(,

, ,,,

]},

];

第五步:放置點選,觸發路由跳轉頁面

載入頁

vue路由傳參的幾種基本方式

現有如下場景,點選父元件的li元素跳轉到子元件中,並攜帶引數,便於子元件獲取資料。 父元件中 for article in articles click getdescribe article id methods getdescribe id 方案一,需要對應路由配置如下 很顯然,需要在path中...

vue cli3路由vue router用法

npm install vue router main js檔案內 匯入vue router import vue from vue vue...

Vue路由vue router

router是一個被vue官方收納的外掛,在我們專案建完之後就會出現一個 router js檔案,我們只需要在這個檔案下配置相應的路由,就可...