Comenzando con Vue Router (x4.x)
Vue Router es el enrutador oficial para Vue.js. Está profundamente integrado con el núcleo de Vue.js, lo que facilita la creación de aplicaciones de una sola página con Vue.js.
Las características incluyen:
- Mapa de ruta anidado
- enrutamiento dinámico
- Configuración de enrutamiento modular basada en componentes
- Parámetros de enrutamiento, consultas, comodines
- Demuestra los efectos de transición proporcionados por el sistema de transición de vue.js.
- Controles de navegación detallados
- Activar enlaces automáticamente con clases CSS
- Modo historial HTML5 o modo hash
- Comportamiento de desplazamiento personalizable
- Codificación correcta de URL
Capítulo 1 Primeros pasos
Enrutamiento de enrutador, debido a que Vue es una aplicación de una sola página y no habrá tanto HTML para saltar, por lo que necesitamos usar el enrutamiento como un salto de página. El enrutamiento de Vue nos permite acceder a diferentes contenidos a través de diferentes URL. Se puede lograr a través de Vue.Aplicación web de una sola página.
Construir proyecto front-end
npm init vue@latest
//或者
npm init vite@latest
Instalar enrutamiento vue-router
// 目前默认版本是4.x版本
yarn add vue-router
或者 npm i vue-router@4
Cree una nueva carpeta de enrutador en el directorio src y luego cree un nuevo index.js en la carpeta del enrutador.
// 引入路由对象
import {
createRouter, createWebHashHistory } from 'vue-router'
// 1. 定义路由组件.
// 也可以从其他文件导入
import News from '../views/News.vue'
import Fun from '../views/Fun.vue'
// 2. 定义一些路由
// 每个路由都需要映射到一个组件。
// 我们后面再讨论嵌套路由。
const routes = [
{
path: '/news', component: News },
{
path: '/fun', component: Fun },
]
// 3. 创建路由实例并传递 `routes` 配置
// 你可以在这里输入更多的配置，但我们在这里
// 暂时保持简单
const router = createRouter({
// 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
history: createWebHashHistory(),
routes, // `routes: routes` 的缩写
})
// 导出路由实例 去main.js入口文件 创建并挂载根实例
export default router
router-view
router-view mostrará el componente correspondiente a la URL. Puede colocarlo en cualquier lugar que se adapte a su diseño.
<template>
<div>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
</template>
Finalmente montarlo en main.js
import {
createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App)
.use(router)
.mount('#app')
Capítulo 2 Enrutamiento con nombre y navegación programática
Rutas con nombre Además de la ruta, también puedes proporcionar un nombre para cualquier ruta. Esto tiene varias ventajas:
●Sin URL codificadas.
●Evita cometer errores tipográficos en las URL.
const routes = [ // 这里可以随意命名 routes1 也可以
{
path: '/news', name: '新闻', component: () => import('../views/News.vue') } // name可以是中文
]
El método de salto del enlace del enrutador puede cambiar objetos
<template>
<div>
<h1>只会番茄炒蛋</h1>
<div>
<!--使用 router-link 组件进行导航 -->
<!--通过传递 `to` 来指定链接 -->
<!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->
<router-link :to="{ name: 'A' }">跳转a</router-link>
<router-link style="margin-left:200px" :to="{ name: 'B' }">跳转b</router-link>
</div>
</div>
</template>
Navegación programática (énfasis)
Además de utilizar la creación de etiquetas para definir enlaces de navegación, también podemos utilizar el método de instancia del enrutador para implementarlo escribiendo código.
- Patrón de cuerdas
methods: {
gotoNews() {
this.$router.push( '/news' )
}
},
- modo objeto
methods: {
gotoNews() {
this.$router.push({
path: '/news'
})
}
},
- patrón de enrutamiento con nombre
methods: {
gotoNews() {
this.$router.push({
name: '新闻'
})
}
},
- un salto de etiqueta
también se puede saltar directamente a través de un href, pero la página se actualizará.
<a href="/b">a标签跳转</a>
Capítulo 3 Parámetros de enrutamiento (puntos clave)
consultar parámetros de ruta
Cuando la navegación programática utiliza la inserción o sustitución del enrutador, se cambia al formato de objeto y se agrega un nuevo atributo de consulta.
gotoPlaying() {
this.$router.push({
path: '/playing',
query: {
name: '路由传了个参数 111'
}
})
},
Aceptar parámetros mediante consulta en useRoute
<template>
<div>我是playing</div>
<div>{
{
this.$route.query.name }} ········{
{
queryName }}</div>
</template>
<script>
export default {
data() {
return {
queryName: null
};
},
mounted() {
// 在生命周期里
this.queryName = this.$route.query.name // 使用路由传参 方法1 定义data数据
console.log(this.$route.query.name) // 使用路由传参 方法2 直接在{
{}}使用
console.log(this.$route) // 打印看看$route
console.log(this.$router)// 打印看看$router
},
methods: {
},
};
</script>
<style scoped>
</style>
Parámetros de enrutamiento dinámico
Muchas veces, necesitamos asignar rutas para un patrón coincidente determinado al mismo componente. Por ejemplo, podríamos tener un componente Usuario que debería mostrarse a todos los usuarios, pero con diferentes ID de usuario. En Vue Router, podemos usar un campo dinámico en la ruta para lograr esto, lo llamamos parámetro de ruta.
Los parámetros de ruta están representados por dos puntos:. Cuando una ruta coincide, el valor de sus parámetros se expondrá en cada componente como this.$route.params.
export default {
data() {
return {
};
},
mounted() {
console.log(this.$route.params) // 和query一样 可以直接往{
{}}里面插入 可以以赋值给data
},
methods: {
},
};
Capítulo 4 Enrutamiento anidado
Algunas UI de aplicaciones constan de varias capas de componentes anidados. En este caso, el fragmento de la URL suele corresponder a una estructura de componentes anidada específica.
const routes = [ // 这里可以随意命名 routes1 也可以
{
path: '/news', name: '新闻', component: () => import('../views/News.vue') },
{
path: '/playing', component: Playing },
{
path: '/home', name: '玩', component: () => import('../views/Home.vue') },
{
path: '/dynamic/:id', component: () => import('../views/Dynamic.vue') },
{
path: '/user',
component: () => import('../views/User.vue'),
children: [
{
path: '/user/man', component: () => import('../views/Man.vue') },// path的第一种写法把路径带上父级的路径写全
{
path: 'woman', component: () => import('../views/Woman.vue') },// path的第二种写法不带斜杠/ 只写自己的路径
] // 配置完嵌套路由后 别忘了在父级组件里 加上 <router-view></router-view> 路由出口 否则不显示
},
]
Como puede ver, la configuración secundaria es simplemente otro conjunto de rutas, al igual que las rutas mismas. Por lo tanto, puede continuar anidando vistas según sus necesidades.
¡No olvides agregar vista de enrutador a la página de enrutamiento anidado!