1. Router installieren
npm i vue-router
2. Routensprung
2.1 Routing-Instanz erstellen
srcErstellen Sieroutereinen Ordner unter dem Verzeichnis, erstellen Sie darin eine Datei undindex.jserstellen Sie eine Routing-Instanz. Erstellen Sie ein Objekt
mitvue-routerder Methode . Unter ihnen sind undcreateRouterrouterhistoryroutes
1.history：
- Der Verlauf ist ein von der Front-End-Routing-Bibliothek bereitgestelltes Objekt, das für die Verwaltung des Status und der Navigation des Browserverlaufs verantwortlich ist.
- Es kann den Verlauf des Browsers durch Push, Ersetzen, Go und andere Methoden steuern. Und aktualisieren Sie den Anzeigeinhalt der aktuellen Seite entsprechend.
- Abhängig von der Art des verwendeten Routings kann das Verlaufsobjekt die native window.history des Browsers oder ein benutzerdefiniertes Objekt sein, das durch Funktionen wie createBrowserHistory und createHashHistory erstellt wurde.
2.routes：
- Routen stellen die Routing-Konfiguration dar und geben die Komponenten an, die verschiedenen URLs und anderen Attributen entsprechen.
- Die Routing-Konfiguration ist im Allgemeinen in einer Baumstruktur organisiert. Jede Route enthält einen Pfad und eine entsprechende Routing-Komponente.
- Im Routing-System können die entsprechenden Komponenten entsprechend dem übereinstimmenden URL-Pfad gerendert werden, wodurch Seitenwechsel und Navigation realisiert werden.
- Durch die Konfiguration verschiedener Routing-Regeln können unterschiedliche Seiten und Navigationslogiken der Anwendung erstellt werden.
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 Routing-Instanz mounten
main.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 Seitenkomponenten erstellen
login.vue
<template>
<div class="login">
<h1>我是login页面</h1>
</div>
</template>
export default {
name: 'login',
setup() {
return {
}
}
}
Registry.vue
<template>
<div>
<h1>我是registry页面</h1>
</div>
</template>
export default {
name: 'registry',
setup() {
return {
}
}
}
2.4 Durch Router-Link springen
In Vue Router
<router-view>eine Komponente, die als Routenplatzhalter verwendet wird. Es handelt sich um ein spezielles Tag, das in der Vue-Anwendungsvorlage platziert wird, um die aktuell aktive Routing-Komponente darzustellen. Wenn Sie Vue Router für die Routing-Verwaltung verwenden, können Sie in der Routing-Konfiguration verschiedene Pfade und entsprechende Komponenten definieren. Wenn Benutzer auf unterschiedliche Pfade zugreifen,<router-view>werden Inhalte automatisch basierend auf den Komponenten angezeigt, die mit dem aktuellen Pfad übereinstimmen.
<router-view>Routing-Adressen und Komponenten können zugeordnet und<router-link>zum Springen zu Seiten verwendet werden. SeinetoEigenschaften können zur entsprechenden Komponente springen , um siepathanzuzeigen .pathcomponent
app.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 Springen Sie durch die js-Methode
<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. Routing-Parameter
3.1 Abfrage
<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 Parameter
Ändern Sie zuerst den Wert von path und übergeben Sie dann mit params den Parameter
router/index.js
{
name: 'login',
path: '/login',
component: () => import('../components/login.vue')
}, {
name: 'registry',
path: '/registry/:name', // 使用param需要修改path的形式
component: () => import('../components/registry.vue')
}
app.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. Routenverschachtelung
Die Routing-Verschachtelung von Vue bezieht sich auf die Organisation mehrerer Unterrouten in einer hierarchischen Struktur in einer Routing-Konfiguration. Dies ermöglicht eine bessere Verwaltung und Organisation komplexer Anwendungsseiten. Um eine verschachtelte Route zu erstellen, müssen Sie eine untergeordnete Route in der übergeordneten Route definieren und
<router-view>eine Beschriftung innerhalb der Komponente verwenden, um den Inhalt der untergeordneten Route anzuzeigen.
/**
* 路由文件
*/
//引入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> </span>
<router-link to="/home/registry">去registry页</router-link>
<hr>
<router-view />
</div>
</template>
app.vue
<script setup>
</script>
<template>
<h1>嵌套路由</h1>
<router-view ></router-view>
</template>
5. Routenumleitung
In Vue Router bezieht sich die Routing-Umleitung auf die Umleitung von Benutzern auf einen anderen Pfad, wenn sie einen bestimmten Pfad besuchen.
redirectDies kann durch Eigenschaften in der Routing-Konfiguration erreicht werden.
const routes = [
{
path: '/',
redirect: '/home' // 当用户访问根路径'/'时，重定向到'/home'
},
{
path: '/home',
component: Home
}
]