Routing in Vue.js
official explanation
In Vue.js, routing is an important concept used for navigation and page jumps. Vue provides an official plug-in called Vue Router for building a routing system for single-page applications (SPA). Vue Router allows you to map different components to different URLs in your application, so users can navigate to different views via the browser's forward and back buttons or by entering the URL directly.
Vue Router provides the following key features:
-
Route mapping : Map URLs to Vue components so that users can access different pages or views through different URLs.
-
Nested routing : Supports nested routing, you can nest multiple routing configurations into parent routing to build complex page structures.
-
Route parameters : Supports dynamic route parameters, allowing you to pass parameters in routes to display different content based on different parameter values.
-
Route navigation guards : Route navigation guards are provided, allowing you to perform some logic before and after route jumps, such as verifying user permissions or performing data loading.
Popular explanation
Imagine that you are using an internet browser to visit different web pages. Whenever you enter a URL or click a link in your browser, the browser loads the corresponding page. This is the browser's routing system at work. Similarly, the routing system in Vue.js allows you to switch between different views in a single-page application, just like navigating to different web pages in a browser.
For example, let's say you're building a single-page application for an online store. You can use Vue Router to define different pages, such as home page, product list page, product details page, shopping cart, etc. Each page corresponds to a Vue component, and Vue Router maps URLs to these components so that users can access different pages by clicking on links or entering specific URLs. This way, users can browse different sections without refreshing the entire page, just like browsing in a real store.
How to implement routing
In Vue.js, you can use Vue Router to implement routing. The following is some detailed introduction and examples about Vue Router:
1. Install Vue Router
First, you need to install Vue Router. You can install it using npm or yarn:
npm install vue-router
or
yarn add vue-router
2. Create a Vue Router instance
In your Vue.js application, you need to create a Vue Router instance and associate it with the application. Typically, this is done in the application's entry point file.
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
routes: [
// 定义路由规则
{
path: '/',
component: Home // 与 Home 组件关联
},
{
path: '/products',
component: Products // 与 Products 组件关联
},
// ...其他路由规则
]
})
3. Create components corresponding to routing
In the above example, we have defined two routing rules, associated with Homecomponent and Productscomponent respectively. Now you need to create these components:
// Home.vue
<template>
<div>
<h1>Home Page</h1>
<!-- Home 页面内容 -->
</div>
</template>
// Products.vue
<template>
<div>
<h1>Products Page</h1>
<!-- Products 页面内容 -->
</div>
</template>
4. Use routing links in templates
To use routing in your application, you can use the element in your template <router-link>to create links so that users can navigate to different pages. For example:
<router-link to="/">Home</router-link>
<router-link to="/products">Products</router-link>
5. Render routing view
In your application layout, you can use <router-view>the element to render the component corresponding to the current route. For example:
<template>
<div>
<h1>My Vue.js App</h1>
<router-view></router-view>
</div>
</template>
In this way, when the user clicks on the link, <router-view>the component matching the current route will be automatically rendered to achieve the page switching effect.
This is just the basic usage of Vue Router. In addition to using the basic route navigation methods provided by Vue Router, there are other common route jump methods. Here are some introductions and examples:
1. Programmatic Navigation
Programmatic navigation is a way to implement routing jumps through JavaScript code. You can use objects in methods of Vue components this.$routerto navigate to different routes.
Example: Programmatic navigation in a button's click event handler.
<template>
<div>
<button @click="navigateToHome">Go to Home</button>
</div>
</template>
<script>
export default {
methods: {
navigateToHome() {
// 编程式导航到"/"路由
this.$router.push('/');
}
}
}
</script>
2. Named routes
Vue Router allows you to set a name for your routes and navigate by name. This is useful for navigating to specific routes in your application.
Example: Set up a named route in the route configuration and use the name to navigate.
const router = new VueRouter({
routes: [
{
path: '/',
component: Home,
name: 'home'
},
{
path: '/products',
component: Products,
name: 'products'
}
]
});
Use named routes for navigation in components:
<template>
<div>
<router-link :to="{ name: 'home' }">Go to Home</router-link>
<router-link :to="{ name: 'products' }">Go to Products</router-link>
</div>
</template>
3. Redirect
Redirects allow you to redirect one route to another. This is useful when you need to direct users to a default page or an old page.
Example: Redirect the "/" route to the "/home" route.
const router = new VueRouter({
routes: [
{
path: '/',
redirect: '/home'
},
{
path: '/home',
component: Home
}
]
});
4. Route alias
Route aliases allow you to set multiple paths for a route so users can access the same page through different paths.
Example: Set the alias "/welcome" for the "/home" route.
const router = new VueRouter({
routes: [
{
path: '/home',
component: Home,
alias: '/welcome'
}
]
});
Vue Router provides flexible navigation options to adapt to different navigation needs. Depending on the specific requirements of your application, you can choose the appropriate navigation method. Whether it's programmatic navigation, named routes, redirects, or route aliases, it can help you build Vue.js applications with a great navigation experience. In this way, compared with the traditional one html, routing does not have to go back and forth between various pages, making data transmission difficult! Of course, we only introduce the use of routing here. We will introduce and study routing parameters in more detail later. I will have a deeper understanding and look forward to bringing you better reading effects and knowledge accumulation! ! !