Mari kita bincangkan tentang penghalaan dalam Vue3 dan menganalisis secara ringkas kaedah konfigurasi penghalaan

Artikel ini akan membawa anda melalui penghalaan dalam Vue3 dan bercakap tentang konfigurasi asas penghalaan, konfigurasi penghalaan dinamik, mod penghalaan, ubah hala, dll. Saya harap ia akan membantu anda.

[Cadangan berkaitan: "tutorial vue.js"]

Konfigurasi asas penghalaan

1. Pasang pemalam

npm install vue-router@next --save

2. Buat fail routers.ts

3. Perkenalkan komponen dan konfigurasikan laluan dalam routers.ts.

import { createRouter,createWebHashHistory } from 'vue-router';
// 引入组件
import Home from './components/Home.vue';
import News from './components/News.vue';
import User from './components/User.vue';

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {path: '/', component: Home},
    {path: '/news', component: News},
    {path: '/user', component: User},
  ]
})

export default router;

4. Lekapkan fail penghalaan ke vue dalam main.ts.

import { createApp } from 'vue'
import App from './App.vue'
import routers from './routers';

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

const app = createApp(App);
app.use(routers);
app.mount('#app');

5 Selepas komponen yang menggunakan penghalaan melekapkan pautan penghala melalui komponen paparan penghala atau pautan penghala

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <ul>
    <li>
      <router-link to="/">首页</router-link>
    </li>
    <li>
      <router-link to="/news">新闻</router-link>
    </li>
    <li>
      <router-link to="/user">用户</router-link>
    </li>
  </ul>

  <router-view></router-view>
</template>

, anda hanya perlu memasang komponen yang sepadan dalam komponen Masukkan laluan yang ditentukan pada laluan halaman untuk melengkapkan lompatan, dan pautan penghala melaksanakan penghalaan dalam bentuk teg untuk lompatan.

Konfigurasi penghalaan dinamik

Konfigurasikan penghalaan dalam route.ts seperti berikut dan konfigurasikan penghalaan dinamik melalui /:aid.

//配置路由
const router = createRouter({

    history: createWebHashHistory(),
    routes: [
        { path: '/', component: Home , alias: '/home' },
        { path: '/news', component: News },
        { path: '/user', component: User },
        { path: '/newscontent/:aid', component: NewsContent },
    ], 
})

Apabila melompat melalui pautan penghala, rentetan templat dan titik bertindih + to diperlukan.

<ul>
    <li v-for="(item, index) in list" :key="index">
        <router-link  :to="`/newscontent/${index}`"> {{item}}</router-link>
    </li>
</ul>

Dapatkan nilai yang diluluskan oleh laluan dinamik melalui ini.$route.params.

mounted(){
    // this.$route.params 获取动态路由的传值
    console.log(this.$route.params)
}

Jika kita ingin melaksanakan pemindahan nilai yang serupa dengan GET, kita boleh menggunakan kaedah berikut

1 Konfigurasikan laluan seperti biasa laluan.

const router = createRouter({

    history: createWebHashHistory(),
    routes: [
        { path: '/', component: Home , alias: '/home' },
        { path: '/news', component: News },
        { path: '/user', component: User },
        { path: '/newscontent', component: NewsContent },
    ], 
})

2. Lompatan pautan penghala dalam bentuk tanda soal.

<router-link  :to="`/newscontent?aid=${index}`"> {{item}}</router-link>

3 Dapatkan nilai dapatkan melalui ini.$route.query.

console.log(this.$route.query);

Navigasi atur cara laluan (laluan lompat JS)

Hanya nyatakan melalui ini.$router.push.

  this.$router.push({
    path: '/home'
  })

Jika anda ingin melaksanakan pemindahan nilai dapatkan, anda boleh menggunakan kaedah berikut.

this.$router.push({
    path: '/home',
    query: {aid: 14}
  })
}

Penghalaan dinamik perlu menggunakan kaedah berikut.

  this.$router.push({
    path: '/home/123',
    // query: {aid: 14}
  })

Mod penghalaan

Mod cincang

Ciri biasa mod Cincang ialah penghalaan halaman mengandungi tanda pon .

const router = createRouter({

    history: createWebHashHistory(),
    routes: [
        ...,
    ], 
})

mod sejarah HTML5

• Memperkenalkan createWebHistory.

• Atribut sejarah dalam item konfigurasi penghala ditetapkan kepada createWebHistory().

import { createRouter, createWebHistory } from 'vue-router'

//配置路由
const router = createRouter({
    history: createWebHistory(),
    routes: [
        ...
    ], 
})

Nota: Selepas menghidupkan mod Sejarah HTML5, anda perlu mengkonfigurasi statik pseudo semasa menerbitkan ke pelayan.

Mengkonfigurasi kaedah pseudo-statik:

https://router.vuejs.org/zh/guide/essentials/history-mode.html#Contoh konfigurasi belakang

Laluan bernama

Keadaan umum

• Konfigurasikan atribut nama apabila mentakrifkan laluan

{ path: '/news', component: News,name:"news" }

• Lepaskan objek untuk melompat

<router-link :to="{name: &#39;news&#39;}">新闻</router-link>

Lepasi nilai melalui GET

• Konfigurasikan atribut nama apabila mentakrifkan laluan

{ path: '/newscontent', component: NewsContent, name: "content" },

• Masukkan objek termasuk pertanyaan

<li v-for="(item, index) in list" :key="index">
    <router-link  :to="{name: &#39;content&#39;,query: {aid: index}}"> {{item}}</router-link>
</li>

Melalui penghalaan dinamik

• Tentukan penghalaan dinamik dan nyatakan atribut nama

{ path: '/userinfo/:id', name: "userinfo", component: UserInfo }

• Masukkan objek termasuk params

<router-link :to="{name: &#39;userinfo&#39;,params: {id: 123}}">跳转到用户详情</router-link>

Peralaan terprogram

sangat serupa dengan kaedah di atas.

<button @click="this.$router.push({name: &#39;userinfo&#39;,params: {id: 666}})">点击跳转</button>

Ubah hala laluan

{ path: '', redirect: "/home" },   // 路由重定向
{ path: '/home', component: Home },

Alias ​​laluan

Dalam contoh di bawah, akses laluan orang dan akses laluan alias adalah konsisten .

{ path: '/user', component: User, alias: '/people' }

alias juga boleh menjadi tatasusunan.

{ path: '/user', component: User, alias: ['/people','/u']}

Bentuk penghalaan dinamik.

{ path: '/userinfo/:id', name: "userinfo", component: UserInfo, alias: '/u/:id' }

Penghalaan bersarang

Senario aplikasi penghalaan bersarang biasanya pada bar navigasi.

• Tentukan penghalaan bersarang

{
  path: '/user', component: User,
  children: [
    { path: '', redirect: "/user/userlist" },
    { path: 'userlist', component: UserList },
    { path: 'useradd', component: UserAdd }
  ]
}

• pautan penghala dan kandungan paparan paparan penghala bersama-sama

<div class="left">
  <ul>
    <li>
      <router-link to="/user/userlist">用户列表</router-link>
    </li>
    <li>
      <router-link to="/user/useradd">增加用户</router-link>
    </li>
  </ul>
</div>
<div class="right">
  <router-view></router-view>
</div>

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati: Pengenalan kepada Pengaturcaraan! !

Atas ialah kandungan terperinci Mari kita bincangkan tentang penghalaan dalam Vue3 dan menganalisis secara ringkas kaedah konfigurasi penghalaan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!