1. Gọi router-view
-- <router-view /> sẽ hiển thị khối component được định nghĩa ở file ./src/routes.js
-- <router-view name="custom" /> sẽ hiển thị khối component được gắn với key: "custom"
-- Khi không có name, sẽ hiển thị khối component với key "default"
-- Tại ./src/App.vue -> Thường đặt khối <router-view /> ở dưới header-component
-- Nếu không có key: "custom", khối <router-view name="custom" /> sẽ không có component để hiển thị (vì chưa được khai báo)
|
1 2 3 4 5 6 7 8 9 |
<template> <div id="app"> <header-component /> <div class="container"> <router-view /> <router-view name="custom"/> </div> </div> </template> |
2. Chuyển link bằng <router-link to="..."> router-link
2.1. Chuyển link đơn giản dùng: to ="..."
-- Thay các thẻ <li> hoặc thẻ <a> trên header thành <router-link>
-- tag="a": là render ra trình duyệt hiểu đó là thẻ a
-- to="/": nghĩa là vào link "/"
-- active-class="active": khi được active sẽ thêm class "active"
-- exact : mặc định được thêm class "active" luôn
|
1 2 3 4 5 |
//<a class="nav-link active" href="/">Home</a> <router-link tag="a" class="nav-link" to="/" active-class="active" exact >Home</router-link> //<a class="nav-link" href="/user">user</a> <router-link tag="a" class="nav-link" to="/user" active-class="active">User</router-link> |
2.2. Chuyển link dùng: v-bind:to ="..."
|
1 2 3 4 5 6 7 8 9 |
//Có thể dùng v-bind để gọi biến trong link, với path:'/user/:id' //<a class="nav-link" href="/user/customID">User 123123 </a> <router-link tag="a" class="nav-link" active-class="active" v-bind:to="'/user/' + customID" >User 123123 </router-link> |
2.3. Chuyển link phức tạp có params, query, hash
--- Có thể dùng v-bind để gọi routes có {name: 'userdetails', path: '/user/:id'} được khai báo ở "./src/routes.js"
--- Trong routes có params: { id: "customID" }
--- Trong routes có query: {location: 'vi', browser: 'chrome'}
--- Trong routes có hash: { hash: "#id_element" }.
--- Khi dùng hash, tại main.js đã khai báo scrollBehavior để scroll đúng đến vị trí cần thiết luôn
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
//<a class="nav-link" href="/user/customID?location=vi&browser=chrome#id_element">Admin</a> <router-link tag="a" class="nav-link" active-class="active" v-bind:to="custom_link" >Admin </router-link> <script> export default { data() { return { custom_link: { name: "userdetails", params: { id: "customID" }, query: { location: "vi", browser: "chrome" }, hash: '#id_element', } }; } }; </script> |
3. Chuyển link bằng funtion event "this.$router.push"
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<template> <div> <button class="btn-danger" @click="goToUser">Back Home</button> </div> </template> <script> export default { methods: { goToUser() { //Cách gọi đơn giản nhất this.$router.push('/user'); //Chi tiết hơn //this.$router.push({path: "/"}); //Có thể dùng gọi theo biến "name" đã được khai báo ở "./src/routes.js" //this.$router.push({name: "homepage"}); } } }; </script> |
4. Lấy Parameter và Query trong router
Khi vào link: './user/customID?location=vn&browswe=chrome
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<template> <div> <h1>User Detail</h1> <p>User ID: {{ $route.params.id }}</p> <p>User ID: {{ $route.query.location}}</p> <p>User ID: {{ $route.query.browser}}</p> </div> </template> <script> export default { //Khi chỉ thay đổi parametter, Vue sẽ không biết có sự thay đổi router --> components sẽ không cập nhật id, cần lưu ý điều này watch: { '$route'(to,from) { this.id = to.params.id; } }, }; </script> <style></style> |
