Solución:
En el archivo .vue, para obtener el objeto de ruta del enrutador Vue:
this.$route
(observe que el enrutador Vue está debajo del this.$router objeto)
los $route El objeto tiene algunas propiedades útiles:
{
fullpath: string,
params: {
[params_name]: string
},
//fullpath without query
path: string
//all the things after ? in url
query: {
[query_name]: string
}
}
Puedes usar el $route objeto como este:
<script>
export default {
mounted() {
console.log(this.$route.fullPath);
}
};
</script>
los parámetros de la ruta de URL están debajo de route.params, como en tu caso route.params.slug
<script>
export default {
mounted() {
console.log(this.$route.params.slug);
}
};
</script>
el gancho de Vue mouted solo se ejecuta en el cliente, cuando desea obtener los parámetros en el servidor, puede usar el método asyncData:
<script>
export default {
asyncData({route, params}) {
if (process.server) {
//use route object
console.log(route.params.slug)
//directly use params
console.log(params.slug)
}
}
};
</script>
Pero, preste atención:
Se llamará del lado del servidor una vez (en la primera solicitud a la aplicación Nuxt) y del lado del cliente cuando navegue a otras rutas. árbitro
Si no necesita la información de los parámetros en el servidor, como si no necesitara obtener datos basados en los parámetros del lado del servidor, creo que el gancho montado será suficiente.
Para leer los parámetros de la URL, debe usar esta forma en Nuxt:
this.$route.query.<name_of_your_parameter_in_url>
Por ejemplo
URL: https://example.com/example/?token=QWERTYUASDFGH
con esta línea de código, puede leer token:
this.$route.query.token
y darte QWERTYUASDFGH.
Simplemente puede acceder a los parámetros de enrutamiento
para usos globales, pero no es una buena práctica:
ventana. $ nuxt._route.params
para usos locales en páginas / componentes / diseño, etc., siempre debemos practicar como se muestra a continuación
esta. $ ruta
o
esto. $ nuxt._route.params