Trong ứng dụng web javascript, router là phần dùng để đồng bộ hoá phần xem được hiển thị hiện tại với nội dung thanh bar địa chỉ trình duyệt. Nói cách khác, router là phần làm cho url thay đổi khi bạn click vào cái gì đó trên trang web và giúp hiển thị chính xác HTML khi điều hướng đến URL cụ thể.
Sau đây là một số đặc điểm của router:
- Mapping route và view lồng nhau
- Nó là một module, thành phần dựa trên cấu hình router
- Tham số router, câu truy vấn, các ký tự đại diện
- Xem hiệu ứng hoán chuyển được cung cấp bởi vuejs
- Có điều khiển chuyển hướng
- Link tự động hoạt có hiệu lực với class css
- Có chế độ lịch sử HTML5 hoặc chế độ hash, tự động fallback trong IE9.
Tạo vue project
Tạo một project cho vue sử dụng Vue CLI. Nếu bạn chưa cài đặt, thì sử dụng câu lệnh như sau:
sudo npm install -g @vue/cli
Câu lệnh trên cần được chạy với quyền là Administrator
Sau đó tạo một project mới bằng câu lệnh như sau:
vue create vueroute
Tiếp theo chuyển vào bên trong project
cd vueroute
Cài đặt vue router
Mặc dù chúng ta có thể cài đặt vue-router trong mặc định khi tạo một dự án mới, nhưng chúng ta sẽ cài tách biệt ra trong bài hướng dẫn này. Chạy câu lệnh sau để cài đặt:
npm install vue-router --save
Bây giờ thì chúng ta có thể import router bên trong ứng dụng Vue. Tiếp theo thêm đoạn code sau vào trong file main.js trong thư mục src
// main.js import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter)
Cơ bản về router
Trong thư mục src, tạo một file routes.js với nội dung như sau:
// routes.js const routes = []; export default routes;
Trong tương lai, chúng ta sẽ tạo các route bên trong file này. Import file vào trong file main.js
// main.js
import Vue from 'vue';
import App from './App.vue';
import VueRouter from 'vue-router';
import routes from './routes';
Vue.config.productionTip = false;
Vue.use(VueRouter);
new Vue({
render: h => h(App),
routes
}).$mount('#app');
Đoạn code trên, chúng ta đã truyền vào obejct router khi tạo một vue instance mới.
Tạo các component của vue
Chúng ta sẽ tạo 3 component mới trong thư mục src > components
Home.vue
// Home.vue
<template>
<div>
Home
</div>
</template>
<script>
export default {
}
</script>
Register.vue
// Register.vue
<template>
<div>
Register
</div>
</template>
<script>
export default {
}
</script>
Login.vue
// Login.vue
<template>
<div>
Login
</div>
</template>
<script>
export default {
}
</script>
Sau khi tạo xong, import tất cả các component này vào trong file src > routes.js. Định nghĩa các route cho mỗi component.
// routes.js
import Home from './components/Home.vue';
import Register from './components/Register.vue';
import Login from './components/Login.vue';
const routes = [
{ path: '/', component: Home },
{ path: '/register', component: Register },
{ path: '/login', component: Login },
];
export default routes;
Tiếp theo mở lại file main.js, tạo một VueRouter instance và cập nhập lại route object
// main.js
import Vue from 'vue';
import App from './App.vue';
import VueRouter from 'vue-router';
import routes from './routes';
Vue.config.productionTip = false;
Vue.use(VueRouter);
const router = new VueRouter({routes});
new Vue({
router,
render: h => h(App)
}).$mount('#app');
Chúng ta cũng cần tạo các đường link trên trang web để có thể link đến 3 component bên trên. Chúng ta cần thêm <route-view> component vào trong file src > App.vue
// App.vue
<template>
<div id="app">
<nav>
<router-link to='/'>Home</router-link>
<router-link to='/register'>Register</router-link>
<router-link to='/login'>Login</router-link>
</nav>
<router-view />
</div>
</template>
<script>
export default {
}
</script>
Ở đây, chúng ta tạo một nav, sử dụng <router-link>, giúp chuyển đổi các component bằng nav
Lưu các file này và mở terminal bật môi trường development server
npm run serve
Mở đường dẫn sau trên trình duyệt http://localhost:8080, màn hình Home component sẽ được tạo ra
Chúng ta đang sử dụng route chế độ hash, thường dùng để xây dựng các ứng dụng SPA
Chế độ route sử dụng lịch sử HTML5
Chúng ta có thể chuyển sang chế độ lịch sử HTML5. Mặc định vue sẽ sử dụng chế đọ Hash. Chúng ta nói với Vue sửu dụng chế độ lịch sử HTML5
Chúng ta sẽ sửa trong file main.js
// main.js
const router = new VueRouter({mode: 'history', routes});
Route động
Các ví dụ trên chỉ ra phần hiển thị view khác nhau dựa trên URL như là /, /register, và các route.
Chúng ta có thể thực hiện các phần động. Ở bên trên chỉ là các phần tĩnh
Chúng ta sẽ định nghĩa thêm route trong src > routes.js gọi là student/:id và cũng tạo thêm một component mới đặt tên là Student.vue trong thư mục src > components.
// Student.vue
<template>
<div>
Student
</div>
</template>
<script>
export default {
}
</script>
Import component trên vào trong routes.js và tạo route cho component này
// main.js
import Home from './components/Home.vue';
import Register from './components/Register.vue';
import Login from './components/Login.vue';
import Student from './components/Student.vue';
const routes = [
{ path: '/', component: Home },
{ path: '/register', component: Register },
{ path: '/login', component: Login },
{ path: '/student/:id', component: Student },
];
export default routes;
Ở đoạn code trên, chúng ta truyền thêm vào một tham số gọi là id và đây sẽ là số id khác nhau đối với từng Student.
Bên trong Student component, chúng ta có thể lấy thông tin của id bằng cách sử dụng biến $route và truy cập bằng cách sử dụng $route.params.id. Cập nhập lại nội dung của Student.vue như sau:
// Student.vue
<template>
<div>
Student ID is: {{ $route.params.id }}
</div>
</template>
<script>
export default {
}
</script>
Chúng ta đang sử dụng chế độ History. Truy cập đường dẫn sau trên trình duyệt: http://localhost:8080/student/4 và chúng ta có thể nhìn thấy ID của student. Chúng ta có thể sử dụng tham số ID để lấy nội dung của Student từ backend. Bạn có thể có nhiều phần động như bạn mong muốn dựa trên yêu cầu của bài toán.
Nên sau khi bạn gọi phương thức Vue.use() bên trong main.js, truyền router object, trong bất kỳ component nào của app bạn có quyền truy cập
- this.$router: là router object.
- this.$route: là route object hiện tại.
Router object
Chúng ta có thể truy cập router object sử dụng this.$router từ bất kỳ component nào khi vue router được cài đặt trong trong component root và nó cung cấp nhiều tính năng hay
Chúng ta có thể tạo một ứng dụng điều hướng đến route mới sử dụng
this.$router.push() this.$router.replace() this.$router.go()
Nếu bạn sử dụng các hoạt động CRUD trước đây bằng vue như một frontend thì chúng ta đã từng sử dụng phương thức push() để thay đổi lập trình router.
Route được đặt tên
Để đơn giản hoá quá trình liên kết để điều hướng đến các route khác nhau bằng cách xác định các route được đặt tên hoặc các route được chỉ định
Đôi khi nó sẽ hữu ích hơn khi nhận định route bằng tên, đặc biệt khi liên kết đến route hoặc thực hiện điều hướng. Có thể đặt tên cho một route trong tuỳ chọn các route khi tạo một Router instace. Tiếp theo hãy thử thêm thuộc tính name cho object routes trong file routes.js
// routes.js
const routes = [
{ path: '/', component: Home, name: 'home' },
{ path: '/register', component: Register, name: 'register' },
{ path: '/login', component: Login, name: 'login' },
{ path: '/student/:id', component: Student, name: 'student' },
];
Chúng ta có thể thay đổi các link trong navbar trong file App.vue
// App.vue
<template>
<div id="app">
<nav>
<ul>
<li>
<router-link :to="{name: 'home'}">Home</router-link>
</li>
<li>
<router-link :to="{name: 'register'}">Register</router-link>
</li>
<li>
<router-link :to="{name: 'login'}">Login</router-link>
</li>
<li>
<router-link :to="{name: 'student', params: {id: 2}}">Student</router-link>
</li>
</ul>
</nav>
<router-view />
</div>
</template>
<script>
export default {
}
</script>
Redirect trong Vue
Trong SPA, chúng ta thường gặp các trường hợp cần thực hiện chuyển hướng sau khi một vài hoạt động thực hiện thành công. Chúng ta có thể chuyển hướng bằng cách lập trình route sử dụng router object. Ví dụ khi đăng nhập thành công, chúng ta cần lập trình route chuyển về trang Home. Hãy cùng xem ví dụ sau
Chúng ta sẽ tạo một component mới tên là Redirect.vue bên trong thư mục components và thêm đoạn code sau đây
// Redirect.vue
<template>
<div></div>
</template>
<script>
export default {
mounted() {
this.$router.push('/home');
}
}
</script>
Khi trang web được mount, nó sẽ chuyển hướng trang web về Home component
Thêm component trên vào routes.js và đăng ký như sau:
// main.js
import Home from './components/Home.vue';
import Register from './components/Register.vue';
import Login from './components/Login.vue';
import Student from './components/Student.vue';
import Redirect from './components/Redirect.vue';
const routes = [
{ path: '/', component: Home, name: 'home' },
{ path: '/register', component: Register, name: 'register' },
{ path: '/login', component: Login, name: 'login' },
{ path: '/student/:id', component: Student, name: 'student' },
{ path: '/redirect', component: Redirect, name: 'redirect' },
];
export default routes;
Nào thử truy cập đường link: http://localhost:8080/redirect và sẽ thấy rằng trang web sẽ tự động chuyển hướng về Home component.
Điều hướng Router History sử dụng phương thức go
Đôi khi cần lập trình forward hoặc backward sử dụng điều hướng route. Ví dụ về tạo trang 404 như sau.
Tạo một trang 404.vue bên trong thư mục components và thêm đoạn code sau
// 404.vue
<template>
<div>
Whoops 404!! The page is not available.
<a href="#" @click.prevent="back">Go back</a>
</div>
</template>
<script>
export default {
methods: {
back() {
this.$router.go(-1);
}
}
}
</script>
Ở đây, chúng ta tạo một trang 404 và sau đấy đặt một link để điều hướng quay về route trước đấy. Bên trong hàm, chúng ta sử dụng -1 nghĩa rằng trình duyệt sẽ quay lại một bước về trang trước đấy. Nếu để là 1 thì nó sẽ chuyển đến một trang trước đấy trên trình duyệt.
Tiếp theo, chúng ta sẽ import vào trang routes.js
// routes.js
import Home from './components/Home.vue';
import Register from './components/Register.vue';
import Login from './components/Login.vue';
import Student from './components/Student.vue';
import Redirect from './components/Redirect.vue';
import Error from './components/404.vue';
const routes = [
{ path: '/', component: Home, name: 'home' },
{ path: '/register', component: Register, name: 'register' },
{ path: '/login', component: Login, name: 'login' },
{ path: '/student/:id', component: Student, name: 'student' },
{ path: '/redirect', component: Redirect, name: 'redirect' },
{ path: '/404', component: Error, name: '404' },
];
export default routes;
Mở đường link: http://localhost:8080/404 và bạn có thể nhìn thấy link để quay trở về trang trước. Click vào link, trình duyệt sẽ chuyển về trang trước.
