Uso básico de vue3 + roteador4

1. Instale o roteador

npm i vue-router

2. Salto de rota

2.1 Criar instância de roteamento

srcCrie routeruma pasta no diretório, crie um arquivo nela e index.jscrie uma instância de roteamento. Crie um objeto
através vue-routerdo método . Entre eles estão ecreateRouterrouterhistoryroutes

1.history：

• History é um objeto fornecido pela biblioteca de roteamento front-end, responsável por gerenciar o status e a navegação do histórico do navegador.
• Ele pode controlar o histórico do navegador por meio de push, replace, go e outros métodos. E atualize o conteúdo de exibição da página atual de acordo.
• Dependendo do tipo de roteamento usado, o objeto de histórico pode ser o window.history nativo do navegador ou um objeto personalizado criado por funções como createBrowserHistory e createHashHistory.

2.routes：

• rotas representa a configuração de roteamento, especificando os componentes correspondentes a diferentes URLs e outros atributos.
• A configuração de roteamento geralmente é organizada em uma estrutura de árvore. Cada rota contém um caminho e um componente de roteamento correspondente.
• No sistema de roteamento, os componentes correspondentes podem ser renderizados de acordo com o caminho da URL correspondente, realizando assim a troca de páginas e a navegação.
• Ao configurar diferentes regras de roteamento, diferentes páginas e lógicas de navegação da aplicação podem ser construídas.

src/router/index.js

/**
 *  路由文件
 */
 //引入router
import {
    
     createRouter, createWebHistory } from 'vue-router'

// 定义路由组件路径
/*
	这里的path和name都是自定义命名
*/
const routes = [
          {
    
    
              name: 'login',  
              path: '/login',
              component: () => import('../components/login.vue')
           }, {
    
    
              name: 'registry',
              path: '/registry', 
              component: () => import('../components/registry.vue')
           }
];

// 创建Router对象
const router = createRouter({
    
    
    history: createWebHistory(),
    routes
})

// 导出对象

export default router;

2.2 Montar instância de roteamento

principal.js

import {
    
     createApp } from 'vue'
import App from './App.vue'
// 引入全局路由
import router from './router'

const app = createApp(App)

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

2.3 Criar componentes de página

login.vue

<template>
    <div class="login">
       <h1>我是login页面</h1>
    </div>
</template>
export default {
    
    
    name: 'login',
    setup() {
    
    
        return {
    
    
        }
    }
}

registro.vue

<template>
  <div>
    <h1>我是registry页面</h1>
  </div>
</template>
export default {
    
    
    name: 'registry',
    setup() {
    
    
        return {
    
    
        }
    }
}

2.4 Saltar através do link do roteador

No Vue Router, <router-view>um componente usado como espaço reservado de rota. É uma tag especial colocada no modelo de aplicativo Vue para renderizar o componente de roteamento atualmente ativo. Ao usar o Vue Router para gerenciamento de roteamento, você pode definir diferentes caminhos e componentes correspondentes na configuração de roteamento. Quando os usuários acessam caminhos diferentes, <router-view>o conteúdo será exibido automaticamente com base nos componentes correspondentes ao caminho atual.
<router-view>Endereços e componentes de roteamento podem ser mapeados e usados <router-link>​​para acessar páginas. Suas topropriedades podem saltar para o componente correspondente pathpara exibi- pathlo component.

aplicativo.vue

<template>
  <h1>路由跳转</h1>
  <div>
    <!-- 通过路由name、path完成跳转 -->
    <router-link :to="{name:'login'}">login</router-link>
    <span>------------</span>
    <router-link to="/registry">registry</router-link>
    <router-view ></router-view>
  </div>
</template>

2.5 Pular pelo método js

<script setup>
import {
    
     useRouter} from 'vue-router'

  const router = useRouter(); 
  
  // 通过路由path跳转
  const toLink = (path) => {
    
    
      router.push(path)
  }
  // 通过路由name跳转
  const toLink1 = (name) => {
    
    
  router.push({
    
    name:name})
  }  
  </script>
<template>
  <div class="btn">
    <!-- 通过js方法完成路由跳转 -->
    <button @click="toLink('/login')">按钮1--->login</button>
    <button @click="toLink1('registry')">按钮2--->registry</button>
 </div>
</template>

3. Parâmetros de roteamento

3.1 consulta

<script setup>
import {
    
     useRouter,useRoute } from 'vue-router'
  
  const router = useRouter();
  const route = useRoute();
  // 通过路由传参
  const toLink2 = (path) => {
    
    
    router.push({
    
    
      name: path,
      query:{
    
    name:'zhangsan',pwd:'123456'}
    })
      // 截取路由参数
  		console.log(rouet.query);
}
  </script>

<template>
  <h1>路由传参</h1>
  <div class="btn">
    <!-- 通过路由传参 -->
    <button @click="toLink2('registry')">to registry</button>
  </div>
</template>

3.2 parâmetros

Primeiro modifique o valor do caminho e, em seguida, use parâmetros para passar o parâmetro
router/index.js

 {
    
    
      name: 'login',
      path: '/login',
      component: () => import('../components/login.vue')
 }, {
    
    
      name: 'registry',
      path: '/registry/:name', // 使用param需要修改path的形式
      component: () => import('../components/registry.vue')
 }

aplicativo.vue

<script setup>
import {
    
     useRouter,useRoute } from 'vue-router'
  
  const router = useRouter();
  const route = useRoute();

  // 通过路由传参
   const toLink3 = (path) => {
    
    
     router.push({
    
    
       name: path,
       params:{
    
    name:'lisi'}
     })
     console.log(route.params);
  } 
  </script>

<template>
  <h1>路由传参</h1>
  <div class="btn">
    <!-- param -->
    <button @click="toLink3('registry')">param</button>
  </div>
</template>

4. Aninhamento de rota

O aninhamento de roteamento do Vue refere-se à organização de múltiplas subrotas em uma estrutura hierárquica em uma configuração de roteamento. Isso permite um melhor gerenciamento e organização de páginas complexas de aplicativos. Para criar uma rota aninhada, você precisa definir uma rota secundária na rota pai e usar <router-view>um rótulo dentro do componente para exibir o conteúdo da rota secundária.

/**
 *  路由文件
 */
 //引入router
import {
    
     createRouter, createWebHistory } from 'vue-router'

// 定义路由组件路径
const routes = [
    {
    
    
        path: '/',
        redirect: {
    
     path: '/home' }, // 重定向到path为 home 的路由
    },
    {
    
    
        name: 'home',
        path: '/home',
        component: () => import('../components/home.vue'),
        children: [
            {
    
    
                name: 'login',
                path: '/home/login',
                component: () => import('../components/login.vue')
            }, {
    
    
                name: 'registry',

                path: '/home/registry', 
                component: () => import('../components/registry.vue')
            }
        ]
    },
   
];

home.vue

<template>
   <div>
    <div>导航栏组件</div>
      <hr>
      <router-link to="/home/login">去login页</router-link>
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
      <router-link to="/home/registry">去registry页</router-link>
      <hr>
      <router-view /> 
    </div>
</template>

aplicativo.vue

<script setup>
 </script>

<template>
  <h1>嵌套路由</h1>
  <router-view ></router-view>
</template>

5. Redirecionamento de rota

No Vue Router, o redirecionamento de roteamento refere-se ao redirecionamento dos usuários para outro caminho quando eles visitam um determinado caminho. redirectIsto pode ser conseguido através de propriedades na configuração de roteamento .

const routes = [
  {
    
    
    path: '/',
    redirect: '/home' // 当用户访问根路径'/'时，重定向到'/home'
  },
  {
    
    
    path: '/home',
    component: Home
  }
]