Vue3 is a popular JavaScript framework that provides many powerful features to simplify front-end development. One of the important features is route management. In Vue3, we can use the Vue Router library to implement the routing function. This article will introduce the routing function in Vue3 in detail, including installation and configuration of Vue Router, basic usage of routing, dynamic routing, nested routing, etc.
Install and configure
First, we need to install Vue Router. Vue Router can be installed in the project with the following command:
npm install vue-router@4 --save
main.jsAfter the installation is complete, configure it in the project's entry file (usually ):
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')
Introduce Vue Router in the configuration file and register it as a plugin for Vue applications.
Next, we need to create a routing configuration file (usually router.js), and configure routing information in it:
import { createRouter, createWebHistory } from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
In the routing configuration file, we use createRouterthe function to create a routing instance, and createWebHistorythe function to create a browser history mode. Then, routesconfigure specific routing information in the array, including path, name and corresponding components.
Now, we have completed the installation and basic configuration of Vue Router.
basic usage
In Vue3, we can use <router-view>and <router-link>components to display and navigate routes.
App.vueFirst, add a component to the root component of the project (usually ) <router-view>to display the component corresponding to the current route:
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
Then, where navigation operations are required, use <router-link>components to generate links:
<template>
<div>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
</div>
</template>
<script>
export default {
name: 'Navigation'
}
</script>
By setting tothe property, we can specify the target path of the link.
In this way, we have completed the most basic routing function. When the user clicks on the navigation link, Vue Router will load the corresponding component according to the configuration in the routing configuration file and render it to <router-view>.
dynamic routing
In addition to basic routing configuration, Vue Router also supports dynamic routing. By using placeholders in the route, we can create routes with parameters.
const routes = [
{
path: '/user/:id',
name: 'User',
component: User
}
]
In the above code, we defined a Userroute named as /user/:id. idis a placeholder, indicating that this part of the path can be any string.
In Userthe component, we can $route.paramsaccess route parameters via:
<template>
<div>
User ID: {
{ $route.params.id }}
</div>
</template>
<script>
export default {
name: 'User'
}
</script>
When the user visits /user/123, $route.params.idit will be displayed as 123.
nested routes
In actual project development, we often need to use nested routes to build complex page structures. Vue Router provides the function of nested routing, which allows us to organize routing more flexibly.
const routes = [
{
path: '/dashboard',
component: Dashboard,
children: [
{
path: '',
component: Overview
},
{
path: 'profile',
component: Profile
},
{
path: 'settings',
component: Settings
}
]
}
]
In the above code, we defined a Dashboardroute named as /dashboard. In Dashboardcomponents, we can define nested sub-routes. The path of the child route is relative to the parent route.
In Dashboardthe component's template, we can use <router-view>the component to render child routes:
<template>
<div>
<router-link to="/dashboard">Overview</router-link>
<router-link to="/dashboard/profile">Profile</router-link>
<router-link to="/dashboard/settings">Settings</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'Dashboard'
}
</script>
By adjusting the path, <router-link>different sub-routes can be specified in .
route guard
Vue Router also provides a route guard function to perform some additional logic when routing switches. Commonly used routing guards include:
beforeEach: Global pre-guard, called before routing switching.beforeResolve: Global resolution guard, called before the route is confirmed.afterEach: Global post guard, called after routing switching.beforeEnter: Route exclusive guard, called before the route enters.beforeRouteUpdate: Route update guard, called before the current route reuse component.beforeRouteLeave: Route leave guard, called before the current route leaves.
We can use these route guards to validate user permissions, handle asynchronous tasks, etc.
Summarize
In this article, we took a detailed look at the routing functionality in Vue3. We learned how to install and configure Vue Router, as well as the basic usage of routing, dynamic routing, nested routing, and routing guards.
By using Vue Router reasonably, we can build complex page structures, realize flexible routing navigation, and execute additional logic when routing switches.