KB Blog
Navigation

Routing

To render routed view:

<main id="myApp"><router-view /></main>

To generate navigation links:

// src/components/layout/SideMenu.vue
<router-link class="list-group-item" active-class="active" to="/catalogs">
  Catalogs
</router-link>

Browser routing vs Hash routing

By default, Vue router uses a Hash routing such as mysite.com/#/myroute. This can raise issue when bookmark and history are involved. To use browser routing, use the history mode:

// src/routes/index.js

Vue.use(Router);

export default new Router({
  mode: "history",
  routes: [
    // paths here
  ]
});

Base url

In case of browsing routing, most of deployment handles the simple case: when baseUrl equals to the root URL /.

However, if it is not the case, the base options is required. Usually, it uses the import from vue.config:

// src/routes/index.js
import { baseUrl } from "../../vue.config";

export default new Router({
  mode: "history",
  base: baseUrl,
  // routes defintions
  routes: []
});

Sources:

Sources:

vue router