In Vue, you can use route parameters to pass data between different pages. Routing parameters can be passed via URL or via query parameters.
1. Use URL parameters to pass data:
URL parameters are usually used to pass data in routing paths, and it is a very intuitive and common way of passing parameters.
When defining a route, you can use dynamic segments in the route path to specify the position of parameters. Dynamic fragments start with a colon, for example `/:id` indicates that the parameter `id` is a dynamic fragment and it will match any value.
In components, you can access URL parameters via `$route.params`.
```javascript
// main.jsimport Vue from 'vue';
import App from './App.vue';
import VueRouter from 'vue-router';
import UserInfo from './components/UserInfo.vue';
import UserProfile from './components/UserProfile.vue';Vue.use(VueRouter);
const routes = [
{ path: '/user-info/:id', component: UserInfo },
{ path: '/user-profile/:username', component: UserProfile },
];const router = new VueRouter({
routes,
});new Vue({
render: h => h(App),
router,
}).$mount('#app');
```
In the above example, we defined two routes, namely `/user-info/:id` and `/user-profile/:username`. `:id` and `:username` are dynamic fragments that will match the actual value.
In the component, the passed parameters can be accessed through `this.$route.params`.
```vue
<!-- UserInfo.vue -->
<template>
<div>
<h1>User Information Page</h1>
<p>User ID: { { $route.params.id }}</p>
</div>
</template>
```
2. Pass data using query parameters:
Query parameters are usually used to add some extra parameters after the URL, passing data in the form of `key=value`. Query parameters start with `?` symbol and each parameter is separated by `&` symbol.
In components, you can access query parameters via `$route.query`.
```javascript
// main.js// ... (code before)
const routes = [
// ... (previous routing configuration)
{ path: '/user-info', component: UserInfo },
];const router = new VueRouter({
routes,
});new Vue({
render: h => h(App),
router,
}).$mount('#app');
```
In the example above, we defined a route `/user-info` with no dynamic fragments.
In components, query parameters can be accessed via `this.$route.query`.
```vue
<!-- UserInfo.vue -->
<template>
<div>
<h1>User Information Page</h1>
<p>User ID: { { $route.query.id }}</p>
<p>Username: { { $route.query.username }}</p>
</div>
</template>
```
For passing data using query parameters, you need to manually add query parameters in the URL, such as `/user-info?id=123&username=johndoe`. In this way, `$route.query` in the component can access the passed parameter value.
Summary: In Vue, you can implement routing parameters through URL parameters and query parameters. Using URL parameters can encode parameter information directly in the URL, while using query parameters is more suitable for passing some additional configuration information. Choose the appropriate parameter passing method according to your needs.