1. npm
npm i vue-router
-- Xem thêm các ví dụ dùng vue-router tại: https://github.com/vuejs/vue-router/tree/dev/examples
2.Tạo file ./src/routes.js
-- File routes.js phải đúng vị trí dưới folder src, cùng cấp file main.js
-- File này quy định các router
-- Có thể sử dụng lazyload cho tất cả thằng component "user" để tăng tốc độ tải website
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
import Home from "./components/Home.vue"; //Sử dụng cách lazy load sẽ tối ưu tốc độ load hơn //import User from "./components/user/User.vue"; const User = resolve => { require.ensure(['./components/user/User'], () => { resolve(require('./components/user/User')) },'user') } //import UserIndex from "./components/user/UserIndex.vue"; const UserIndex = resolve => { require.ensure(['./components/user/UserIndex '], () => { resolve(require('./components/user/UserIndex ')) },'user') } //import UserDetails from "./components/user/UserDetails.vue"; const UserDetails = resolve => { require.ensure(['./components/user/UserDetails '], () => { resolve(require('./components/user/UserDetails ')) },'user') } //import UserEdit from "./components/user/UserEdit.vue"; const UserEdit= resolve => { require.ensure(['./components/user/UserEdit'], () => { resolve(require('./components/user/UserEdit')) },'user') } import Aboutfrom "./components/About.vue"; import AboutCustomfrom "./components/AboutCustom.vue"; import ErrorComponent from "./components/404.vue"; export const routes = [ { path: "/", name: "homepage", component: Home }, //tùy chọn router theo name, //Nếu <router-view /> thì gọi component About //Nếu <router-view name="about-custom"/> thì gọi component AboutCustom { path: "/about", name: "about", components: { default: About, 'about-custom': AboutCustom, } }, { path: "/user", name: "user", component: User, children: [ { path: "", name: "user_index", component: UserIndex }, //beforeEnter --> chạy hàm trước khi router được sử dụng, luôn phải có next() để đi tiếp { path: ":id", name: "user_details", component: UserDetails, beforeEnter: (to, from, next) => { console.log('Router user detail run'); next(); } }, { path: ":id/edit", name: "user_edit", component: UserEdit } ] }, { path: "/404", name: "errorpage", component: ErrorComponent }, { path: "*", redirect: { name: "errorpage" } } ]; |
3. Tại file ./src/main.js
-- Gọi vue-router tại main.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
import Vue from "vue"; import App from "./App.vue"; import VueRouter from "vue-router"; Vue.use(VueRouter); import { routes } from "./routes"; //mode: history: để sửa lỗi dấu # trên link về bình thường //scrollBehavior để khi vào link có đánh dấu #id_custom thì nhảy đến element có id tương ứng luôn const router = new VueRouter({ mode: "history", routes, scrollBehavior(to, from, savedPosition) { if (savedPosition) { return savedPosition; } if (to.hash) { return { selector: to.hash }; } } }); //beforeEach sẽ hoạt động trước khi tất cả các router được chạy, luôn phải có next() để đi tiếp router.beforeEach((to, from, next) =>{ console.log('Global route guard'); next(); }) new Vue({ el: "#app", router: router, render: h => h(App) }); |
4. Tại file ./src/components/user/UserDetails.vue
-- 2 hàm hooks, 1 hàm chạy trước khi router được vào và 1 hàm chạy trước khi router rời đi
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<script> export default { beforeRouteEnter(to, from, next) { if (true) { next(); } else { next(false); } }, beforeRouteLeave(to, from, next) { if (false) { next(); } else { if (confirm("Are you sure???")) { next(); } else { next(false); } } } }; </script> |
