Estoy usando Nuxt.js y tengo una página dinámica que se define en
pages/post/_slug.vueEntonces, cuando visito la URL de la página, digamos, http://localhost:3000/post/hello-world , ¿cómo puedo leer este valor de parámetro de slug dentro de mi página?
Actualmente lo obtengo usando asyncData de la siguiente manera:
asyncData ({ params }) { // called every time before loading the component return { slug: params.slug } }Esto funciona bien, pero creo que no es la mejor manera, y debería haber una mejor manera de hacer que el parámetro esté disponible en la página. ¡Cualquier ayuda es apreciada!
En el archivo .vue, para obtener el objeto de ruta del enrutador Vue:
this.$route (observe que el enrutador Vue está debajo del objeto this.$router )
El objeto $route 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 objeto $route así:
<script> export default { mounted() { console.log(this.$route.fullPath); } }; </script> los parámetros de ruta de URL están debajo de route.params , como en su caso route.params.slug
<script> export default { mounted() { console.log(this.$route.params.slug); } }; </script>el enlace mouted de Vue 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, presta 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 parámetros en el servidor, como si no necesita obtener datos basados en los parámetros en el 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 te doy QWERTYUASDFGH .
Si está en el contexto de la tienda (por ejemplo, actions.js), puede acceder a los parámetros de consulta de esta manera:
this.$router.currentRoute.query['param_name']