Vue Router example - with Nav Bar, Dynamic Route & Nested Routes
Male avatar

loveprogramming viết ngày 03/04/2021

Vue Router example - with Nav Bar, Dynamic Route & Nested Routes

Vue Router deeply integrates with Vue.js that we can use to build single-page Vue Application in simple way. In this tutorial, we're gonna look at a Vue Router example that allows us to navigate among tabs and dynamically show item details from a item list with Nav bar, Dynamic Route and Nested Routes.

More Practice:

Vue Router example Overview



We can:

  • click on Nav Bar button to change view among Pages.
  • click on any Customer to show details.


    Vue Router

    When adding Vue Router to Vue App, we have 2 core actions:
  • map components to the routes
  • let Vue Router know where to render them

    Add Vue Router to Project

  • Run command: npm install vue-router.
  • Import router to main.js:
    import Vue from "vue";
    import App from "./App.vue";
    import router from './router'

Vue.config.productionTip = false;

new Vue({
router, // inject the router to make whole app router-aware
render: h => h(App)

Vue Router with Nav Bar

  • Define some routes, each route has a path and maps to a component: src/router.js
    import Vue from "vue";
    import Router from "vue-router";
    import CustomersList from "./components/CustomersList.vue";
    import AddCustomer from "./components/AddCustomer.vue";
    import SearchCustomers from "./components/SearchCustomers.vue";


export default new Router({
// get rid of the hash (#) in Url
// the hash (#) helps the page not to be reloaded when the URL changes
mode: "history",
routes: [
path: "/",
name: "customers",
alias: "/customer", // go '/', the URL remains '/', but it wcill be matched if visiting '/customer'
component: CustomersList
path: "/add",
name: "add",
component: AddCustomer
path: "/search",
name: "search",
component: SearchCustomers


    <div id="app">
            <router-link to="/">Customers</router-link>
            <router-link to="/add">Add</router-link>
            <router-link to="/search">Search</router-link>
  • We use router-link component for navigation and specify the link with 'to' prop. By default, <router-link> will be rendered as an <a> tag.
  • router-view is the router outlet that render the matched component.


Bình luận

{{ }}
Bỏ hay Hay
Male avatar
{{ comment_error }}

Hiển thị thử

Chỉnh sửa

Male avatar


545 bài viết.
98 người follow
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
Male avatar
1 0
Tutorial Link: (Link) (Ảnh) Django is a Pythonbased free and opensource web framework that follows the modeltemplateview architectural pattern. A...
loveprogramming viết hơn 1 năm trước
1 0
Male avatar
1 0 Angular 11 Node.js PostgreSQL Crud Example (Ảnh) Tutorial: “Angular 11 Node.js Postg...
loveprogramming viết hơn 1 năm trước
1 0
Male avatar
1 0
Angular Spring Boot jwt Authentication Example Github (Ảnh) Tutorial: ” Angular Spring Boot jwt Authe...
loveprogramming viết hơn 1 năm trước
1 0
Bài viết liên quan
Male avatar
0 0 In this tutorial, shows you way to add a Dialog Component to Vuejs App. Demo ...
loveprogramming viết 1 năm trước
0 0
Male avatar
0 0 Vue.js + Node.js/Express RestAPIs – Mongoose ODM + Mon...
loveprogramming viết 1 năm trước
0 0


{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}

Male avatar
{{userFollowed ? 'Following' : 'Follow'}}
545 bài viết.
98 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!