Vue3 Routing
In this chapter, we will introduce Vue routing.
Vue routing allows us to access different content via different URLs.
Vue enables the creation of single-page web applications (SPA) with multiple views.
Vue.js routing requires the vue-router library.
Chinese documentation address: vue-router documentation.
Installation
1. Direct Download / CDN
https://unpkg.com/vue-router@4
NPM
It is recommended to use the Taobao mirror:
npm install -g cnpm --registry=https://registry.npmmirror.com
cnpm install vue-router@4
Simple Example
Vue.js + vue-router can easily implement a single-page application.
<router-link> is a component used to set up a navigation link to switch between different HTML content. The to attribute is the target address, i.e., the content to be displayed.
In the following example, we will add vue-router, configure components and route mappings, and then tell vue-router where to render them. The code is as follows:
HTML Code
<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/vue-router@4"></script>
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- Use router-link component for navigation -->
<!-- Pass `to` to specify the link -->
<!-- `<router-link>` will render an `<a>` tag with the correct `href` attribute -->
<router-link to="/">Go to Home</router-link>
<router-link to="/about">Go to About</router-link>
</p>
<!-- Route outlet -->
<!-- Components matched by the route will render here -->
<router-view></router-view>
</div>
router-link
Note that we are not using the regular a tag, but a custom component router-link to create links. This allows Vue Router to change the URL without reloading the page, handle URL generation, and encoding. We will see how to benefit from these features later.
router-view
router-view will display the component corresponding to the URL. You can place it anywhere to fit your layout.
JavaScript Code
// 1. Define route components.
// These can also be imported from other files
const Home = { template: '<div>Home</div>' }
const About = { template: '<div>About</div>' }
// 2. Define some routes
// Each route should map to a component.
// We'll discuss nested routes later.
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About },
]
// 3. Create the router instance and pass the `routes` configuration
// You can pass more configurations here, but let's
// keep it simple for now
const router = VueRouter.createRouter({
// 4. Provide the history implementation. We are using the hash mode for simplicity.
history: VueRouter.createWebHashHistory(),
routes, // shorthand for `routes: routes`
})
// 5. Create and mount the root instance
const app = Vue.createApp({})
// Make sure to _use_ the router instance to make the
// whole app router-aware.
app.use(router)
app.mount('#app')
// Now, the app has started!
Clicked navigation links will have the style class="router-link-exact-active router-link-active".
<router-link> Related Attributes
Next, we can learn more about the attributes of <router-link>.
to
Indicates the link to the target route. When clicked, the value of to is immediately passed to router.push(), so this value can be a string or an object describing the target location.
<!-- String -->
<router-link to="home">Home</router-link>
<!-- Rendered result -->
<a href="home">Home</a>
<!-- Using v-bind for JS expressions -->
<router-link v-bind:to="'home'">Home</router-link>
<!-- Without v-bind, like binding other attributes -->
<router-link :to="'home'">Home</router-link>
<!-- Same as above -->
<router-link :to="{ path: 'home' }">Home</router-link>
<!-- Named route -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
<!-- With query parameters, the result is /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>
replace
Setting the replace attribute will call router.replace() instead of router.push() when clicked, and it will not leave a history record.
<router-link :to="{ path: '/abc'}" replace></router-link>
append
Setting the append attribute adds the current (relative) path to its path. For example, if we navigate from /a to a relative path b, without append, the path will be /b, and with append, it will be /a/b.
<router-link :to="{ path: 'relative/path'}" append></router-link>
tag
Sometimes you want <router-link> to render as a specific tag, such as <li>. You can specify the tag with the tag prop, and it will still listen for clicks and trigger navigation.
<router-link to="/foo" tag="li">foo</router-link>
<!-- Rendered result -->
<li>foo</li>
active-class
Sets the CSS class name to be used when the link is active. You can replace it with the following code:
<style>
._active{
background-color : red;
}
</style>
<p>
<router-link v-bind:to = "{ path: '/route1'}" active-class = "_active">Router Link 1</router-link>
<router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>
Note that class uses active-class="_active".
exact-active-class
Configures the class to be activated when the link is exactly matched. You can replace it with the following code:
<p>
<router-link v-bind:to = "{ path: '/route1'}" exact-active-class = "_active">Router Link 1</router-link>
<router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>
event
Declares the events that can be used to trigger navigation. It can be a string or an array of strings.
<router-link v-bind:to = "{ path: '/route1'}" event = "mouseover">Router Link 1</router-link>
The above code sets event to mouseover, so the HTML content will change when the mouse moves over Router Link 1.