Vue---enrutamiento

Tabla de contenido

1. Por qué usar Vue

2. Cómo usar el enrutamiento en Vue

(1) Enrutamiento de instalación

(2) Configurar archivos de enrutamiento independientes 

(3) Importar enrutamiento al proyecto

(4) Especifique la entrada de visualización de ruta

(5) Especificar salto de ruta

3. Parámetros de paso de ruta

(1) Especifique la clave para pasar parámetros en la configuración de enrutamiento

(2) El proceso de salto lleva parámetros

(3) Leer parámetros en la página de detalles

4. Enrutamiento anidado

(1) Agregar configuración de subenrutamiento en el archivo de configuración de enrutamiento

(2) Especifique la ubicación de visualización de las subrutas y agregue enlaces de salto de subrutas

(3) Visualización predeterminada (configuración de redirección)

---

1. Por qué usar Vue

Enrutamiento Puedes entenderlo como una herramienta entre páginas de administración, sí, solo entiéndelo así por el momento

2. Cómo usar el enrutamiento en Vue

(1) Enrutamiento de instalación

//安装路由
npm install --save router

//启动服务
npm run serve

(2) Configurar archivos de enrutamiento independientes 

// index.js
import { createRouter, createWebHashHistory } from 'vue-router'
import mainview from '../views/mainview.vue'


const routes = [{
    //path表示访问页面给定的路径
    //compoment表示对应组件
        path: '/',
        name: 'home',
        component: mainview
    },
    {
        path: '/news',
        name: 'news',
        component: () =>
            import ('../views/news.vue')
    }
]


const router = createRouter({
    //history表示访问方式
    history: createWebHashHistory(),
    routes
})


export default router

(3) Importar enrutamiento al proyecto

//main。js

import router from './router';
createApp(App).use(router).mount('#app')

(4) Especifique la entrada de visualización de ruta

//在App.vue中显示路由入口

<router-view></router-view>

(5) Especificar salto de ruta

<router-link to='/'></router-link>

3. Parámetros de paso de ruta

(1) Especifique la clave para pasar parámetros en la configuración de enrutamiento

//冒号后面是key的名字
path: "/music/detail/:name",
        name: 'musicdetail',
        component: () =>
            import ('../views/musicdetail.vue')

(2) El proceso de salto lleva parámetros

<ul>
        <li><router-link to='/music/detail/QQ'>QQ音乐</router-link></li>
        <li><router-link to="/music/detail/酷狗">酷狗音乐</router-link></li>
        <li><router-link to="/music/detail/网易云">网易云音乐</router-link></li>
    </ul>

(3) Leer parámetros en la página de detalles

//这里的name就是你指定的key叫什么他就是什么 
<h3>{
    
    { $route.params.name }}</h3>

4. Enrutamiento anidado

¿Por qué aparecen rutas anidadas? En algunas barras de navegación veremos que hay dos niveles debajo de la barra de navegación del primer nivel, y tres niveles debajo de la barra de navegación del segundo nivel. Esto es enrutamiento anidado. Veamos cómo implementarlo. Dividido en tres pasos.

(1) Agregar configuración de subenrutamiento en el archivo de configuración de enrutamiento

const routes = [{
        path: '/',
        name: 'home',
        component: HomeView
    },
    {
        path: '/about',
        name: 'about',
        redirect: '/about/them',
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () =>
            import ( /* webpackChunkName: "about" */ '../views/AboutView.vue'),
        children: [{
//注意开始没有/
                path: 'us',
                component: () =>
                    import ("../views/about/aboutus.vue")
            },
            {
                path: 'them',

                component: () =>
                    import ("../views/about/aboutthem.vue")
            }

        ]
    }
]

(2) Especifique la ubicación de visualización de las subrutas y agregue enlaces de salto de subrutas

<router-link to="/about/us">关于我们</router-link> | 
  <router-link to="/about/them">关于他们</router-link>
  <RouterView></RouterView>

(3) Visualización predeterminada (configuración de redirección)

 path: '/about',
        name: 'about',
//重定向，实现默认显示
        redirect: '/about/them',
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () =>
            import ( /* webpackChunkName: "about" */ '../views/AboutView.vue'),
        children:....