vue路由的，基本用法

第一步：安裝路由

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路由的基本用法

doctype html en utf 8 路由基本用法 title router link active active style js vue.js script js vue router.js script head itany 使用router link元件來定義導航，to屬性指定鏈結ur...

vue路由用法

父元件中 通過路由屬性中的name來確定匹配的路由，通過params來傳遞引數。this.router.push 對應路由配置 這裡可以新增 id 也可以不新增，不新增資料會在url後面顯示，不新增資料就不會顯示 子元件中 這樣來獲取引數 this.route.params.id父元件 使用path...

Vue 基本路由的使用

六 重定向設定初識開啟的頁面 七 給路由設定樣式 注意 匯入的包要在vue下邊 基本路由的使用title src lib vue 2.4.0.js script src lib vue router 3.0.1.js script 注意 是在vm例項上邊建立 var login var regist...