[Vue-Router] alias

The path name returned by the background is unreasonable, but multiple projects are in use, and an alias can be used when it is inconvenient to change. There can be multiple or one.

First.vue

<template>
  <h1>First Seciton</h1>
</template>

Second.vue , Third.vue code is the same

UserSettings.vue

<template>
  <h1>UserSettings</h1>
  <router-link to="/settings/children1">children1</router-link>
  <br />
  <router-link to="/settings/children2">children2</router-link>
  <br>
  <button @click="toBackPage">返回</button>
  <hr>
  <router-view></router-view>
  <router-view name="a"></router-view>
  <router-view name="b"></router-view>
</template> 

<script setup lang="ts">
import {
      
       useRouter } from 'vue-router';
const router = useRouter();
const toBackPage = () => {
      
      
  router.go(-1);
}
</script>

<style scoped></style>

index.ts

import {
    
     createRouter, createWebHistory } from 'vue-router'
import First from '../components/First.vue'
import Second from '../components/Second.vue'
import Third from '../components/Third.vue'
import UserSettings from '../components/UserSettings.vue'

export const router = createRouter({
    
    
  history: createWebHistory(),
  // alias 起别名，都可以访问同一页面
  alias: ['/user-settings', '/Settings'],
  routes: [
    {
    
    
      path: '/settings',
      component: UserSettings,
      children: [
        {
    
    
          path: 'children1',
          components: {
    
    
            default: First,
            a: Second,
            b: Third,
          },
        },
        {
    
    
          path: 'children2',
          components: {
    
    
            default: Third,
            a: Second,
            b: First,
          },
        },
      ]
    },

  ],
})

app.vue

<template>
  <h1>Nested Named Views</h1>
  <hr>
  <router-view></router-view>
  <hr>
</template>

<script setup lang="ts">

</script>

<style scoped></style>