路由

如何搭建一个基本路由。别名，重定向。子路由。传递参数。
如何搭建一个二级路由。
如何传递参数。
如何实现路由的跳转。

搭建一个基本路由

下载安装

tsx

npm install vue-router
https://router.vuejs.org/zh/

入口文件挂载

tsx

import {createApp} from "vue";
import App from "@/App.vue";
import Home from "@/pages/Home/index.vue";
import About from "@/pages/About/index.vue";
import NotFount from "@/pages/NotFount/index.vue";
// 1- 引入createRouter
import {createRouter, createWebHashHistory, createWebHistory} from "vue-router"
// 2- 配置每一个路由器的信息
const routes = [
    {
        path: "/",
        redirect: "/home"
    }, {
        path: "/home",
        component: Home
    },
    {
        path: "/about",
        component: About
    },
    {
        // vue-router@4不支持以下代码实现404
        // path:"*",
        // component:NotFount

        // 需要借助params形式实结合正则实现404 pathMath是自定义的
        path: "/:pathMath(.*)",
        component: NotFount
    }
]
// 3- 创建router
const router = createRouter({
    // 相当于Vue2当中的mode:"history"
    history: createWebHistory(),
    // 相当于Vue2当中的mode:"hash"
    // history:createWebHashHistory(),
    routes,
    scrollBehavior() {
        return {
            left: 0,// 相当于之前的x
            top: 0// 相当于之前的y
        }
    }
});
// 4- 安装1
// const app = createApp(App);
// app.use(router);
// app.mount("#app");

// 5- 安装2-链式调用
createApp(App).use(router).mount("#app");

抽离路由

路由的主入口：src->router->index.ts

import Home from "@/pages/Home/index.vue";
import About from "@/pages/About/index.vue";
import NotFount from "@/pages/NotFount/index.vue";
// 1- 引入createRouter
import {createRouter, createWebHashHistory, createWebHistory} from "vue-router"
// 2- 配置每一个路由器的信息
const routes = [
    {
        path: "/",
        redirect: "/home"
    }, {
        path: "/home",
        component: Home
    },
    {
        path: "/about",
        component: About
    },
    {
        // vue-router@4不支持以下代码实现404
        // path:"*",
        // component:NotFount

        // 需要借助params形式实结合正则实现404
        path: "/:pathMath(.*)",
        component: NotFount
    }
]
// 3- 创建router
const router = createRouter({
    // 相当于Vue2当中的mode:"history"
    history: createWebHistory(),
    // 相当于Vue2当中的mode:"hash"
    // history:createWebHashHistory(),
    routes,
    scrollBehavior() {
        return {
            left: 0,// 相当于之前的x
            top: 0// 相当于之前的y
        }
    }
});
export default router;

在项目的主入口文件中挂载主路由：src->main.ts

import {createApp} from "vue";
import App from "@/App.vue";
import router from "@/router";

// 4- 安装1
// const app = createApp(App);
// app.use(router);
// app.mount("#app");

// 5- 安装2-链式调用
createApp(App).use(router).mount("#app");

路由懒加载

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就会更加高效。
Vue Router 支持开箱即用的动态导入，这意味着你可以用动态导入代替静态导入

// 将
// import UserDetails from './views/UserDetails.vue'
// 替换成
const UserDetails = () => import('./views/UserDetails.vue')

const router = createRouter({
  // ...
  routes: [
    { path: '/users/:id', component: UserDetails }
    // 或在路由定义里直接使用它
    { path: '/users/:id', component: () => import('./views/UserDetails.vue') },
  ],
})

component (和 components) 配置接收一个返回 Promise 组件的函数，Vue Router 只会在第一次进入页面时才会获取这个函数，然后使用缓存数据。这意味着你也可以使用更复杂的函数，只要它们返回一个 Promise ：

const UserDetails = () =>
  Promise.resolve({
    /* 组件定义 */
  })

一般来说，对所有的路由都使用动态导入是个好主意。

注意

如果你使用的是 webpack 之类的打包器，它将自动从代码分割中受益。

如果你使用的是 Babel，你将需要添加 syntax-dynamic-import 插件，才能使 Babel 正确地解析语法。

把组件按组分块

使用 webpack

有时候我们想把某个路由下的所有组件都打包在同个异步块 (chunk) 中。只需要使用命名 chunk，一个特殊的注释语法来提供 chunk name (需要 Webpack > 2.4)：

const UserDetails = () =>
  import(/* webpackChunkName: "group-user" */ './UserDetails.vue')
const UserDashboard = () =>
  import(/* webpackChunkName: "group-user" */ './UserDashboard.vue')
const UserProfileEdit = () =>
  import(/* webpackChunkName: "group-user" */ './UserProfileEdit.vue')

webpack 会将任何一个异步模块与相同的块名称组合到相同的异步块中

使用Vite

在Vite中，你可以在rollupOptions下定义分块

// vite.config.js
export default defineConfig({
  build: {
    rollupOptions: {
      // https://rollupjs.org/guide/en/#outputmanualchunks
      output: {
        manualChunks: {
          'group-user': [
            './src/UserDetails',
            './src/UserDashboard',
            './src/UserProfileEdit',
          ],
        },
      },
    },
  },
})

使用案例

import NotFount from "@/pages/NotFount/index.vue";
// 1- 引入createRouter
import {createRouter, createWebHashHistory, createWebHistory} from "vue-router"
const Home = ()=>import("@/pages/Home/index.vue");

// 2- 配置每一个路由器的信息
const renderCom = function(name:string){
    return ()=>import("@/pages/"+name+"/index.vue");
}

// 2- 配置每一个路由器的信息
const routes = [
    {
        path: "/",
        redirect: "/home"
    }, {
        path: "/home",
        component: Home
    },
    {
        path: "/about",
        component: ()=>import("@/pages/About/index.vue")
    },
    {
        // vue-router@4不支持以下代码实现404
        // path:"*",
        // component:NotFount

        // 需要借助params形式实结合正则实现404
        path: "/:pathMath(.*)",
        component: renderCom('NotFount')
    }
]
// 3- 创建router
const router = createRouter({
    // 相当于Vue2当中的mode:"history"
    history: createWebHistory(),
    // 相当于Vue2当中的mode:"hash"
    // history:createWebHashHistory(),
    routes,
    scrollBehavior() {
        return {
            left: 0,// 相当于之前的x
            top: 0// 相当于之前的y
        }
    }
});
export default router;

二级路由

在路由上配置children属性：src->router->index.ts

{
        path: "/home",
        component: Home,
        children:[
            {
                path:"/home",
                redirect:"/home/newsList"
            },
            {
                path:"/home/message",
                component:()=>import("@/pages/Home/Message/index.vue")
            },
            {
                path:"/home/newsList",
                component:()=>import("@/pages/Home/NewsList/index.vue")
            }
        ]
    }

数据获取

有时候，进入某个路由后，需要从服务器获取数据。例如，在渲染用户信息时，你需要从服务器获取用户的数据。我们可以通过两种方式来实现：
导航完成之后获取：先完成导航，然后在接下来的组件生命周期钩子中获取数据。在数据获取期间显示“加载中”之类的指示。
导航完成之前获取：导航完成前，在路由进入的守卫中获取数据，在数据获取成功后执行导航。
从技术角度讲，两种方式都不错 —— 就看你想要的用户体验是哪种。

导航完成后获取数据

当你使用这种方式时，我们会马上导航和渲染组件，然后在组件中获取数据。这让我们有机会在数据获取期间展示一个 loading 状态，还可以在不同视图间展示不同的 loading 状态。

假设我们有一个 Post 组件，需要基于 route.params.id 获取文章数据：

组合式API写法

vue

<template>
	<div class="post">
    <div v-if="loading" class="loading">Loading...</div>
    <!--在模版中仍然可以使用-->
	<div >{{$route.params.id}}</div>
    <div v-if="error" class="error">{{ error }}</div>

    <div v-if="post" class="content">
      <h2>{{ post.title }}</h2>
      <p>{{ post.body }}</p>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import { getPost } from './api.js'

const route = useRoute()

const loading = ref(false)
const post = ref(null)
const error = ref(null)

// 侦听路由的参数，以便再次获取数据
watch(() => route.params.id,fetchData,{ immediate: true })

async function fetchData(id) {
  error.value = post.value = null
  loading.value = true
  
  try {
    // 用获取数据的工具函数 / API 包裹器替换 `getPost`
    post.value = await getPost(id)  
  } catch (err) {
    error.value = err.toString()
  } finally {
    loading.value = false
  }
}
</script>

选项时API写法

vue

<template>
  <div class="post">
    <div v-if="loading" class="loading">Loading...</div>
    <div v-if="error" class="error">{{ error }}</div>
    <div v-if="post" class="content">
      <h2>{{ post.title }}</h2>
      <p>{{ post.body }}</p>
    </div>
  </div>
</template>

<script>
import { getPost } from './api.js'

export default {
  data() {
    return {
      loading: false,
      post: null,
      error: null,
    }
  },
  created() {
    // 侦听路由的参数，以便再次获取数据
    this.$watch(
      () => this.$route.params.id,
      this.fetchData,
      // 组件创建完后获取数据，
      // 此时 data 已经被监听了
      { immediate: true }
    )
  },
  methods: {
    async fetchData(id) {
      this.error = this.post = null
      this.loading = true

      try {
        // 用获取数据的工具函数 / API 包裹器替换 `getPost`
        this.post = await getPost(id)
      } catch (err) {
        this.error = err.toString()
      } finally {
        this.loading = false
      }
    },
  },
}
</script>

在导航完成前获取数据

通过这种方式，我们在导航转入新的路由前获取数据。我们可以在接下来的组件的 beforeRouteEnter 守卫中获取数据，当数据获取成功后只调用 next 方法：

export default {
  data() {
    return {
      post: null,
      error: null,
    }
  },
  beforeRouteEnter(to, from, next) {
    try {
      const post = await getPost(to.params.id)
      // `setPost` 方法定义在下面的代码中
      next(vm => vm.setPost(post))
    } catch (err) {
      // `setError` 方法定义在下面的代码中
      next(vm => vm.setError(err))
    }
  },
  // 路由改变前，组件就已经渲染完了
  // 逻辑稍稍不同
  async beforeRouteUpdate(to, from) {
    this.post = null
    getPost(to.params.id).then(this.setPost).catch(this.setError)
  },
  methods: {
    setPost(post) {
      this.post = post
    },
    setError(err) {
      this.error = err.toString()
    }
  }
}

在为后面的视图获取数据时，用户会停留在当前的界面，因此建议在数据获取期间，显示一些进度条或者别的指示。如果数据获取失败，同样有必要展示一些全局的错误提醒。

组合式API

Vue 的组合式 API 的引入开辟了新的可能性，但要想充分发挥 Vue Router 的潜力，我们需要使用一些新的函数来代替访问 this 和组件内导航守卫。

在 setup 中访问路由和当前路由

因为我们在 setup 里面没有访问 this(指向undefined)，所以我们不能直接访问 this.$router 或 this.$route。作为替代，我们使用 useRouter 和 useRoute 函数：

vue

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

const router = useRouter()
const route = useRoute()

function pushWithQuery(query) {
  router.push({
    name: 'search',
    query: {
      ...route.query,
      ...query,
    },
  })
}
</script>

route 对象是一个响应式对象。在多数情况下，你应该避免监听整个 route 对象，同时直接监听你期望改变的参数。

vue

<script setup>
import { useRoute } from 'vue-router'
import { ref, watch } from 'vue'

const route = useRoute()
const userData = ref()

// 当参数更改时获取用户信息
watch(
  () => route.params.id,
  async newId => {
    userData.value = await fetchUser(newId)
  }
)
</script>

请注意，在模板中我们仍然可以访问 $router 和 $route，所以如果你只在模板中使用这些对象的话，是不需要 useRouter 或 useRoute 的。

导航守卫

Vue Router 将更新和离开守卫作为组合式 API 函数公开

vue

<script setup>
import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'
import { ref } from 'vue'

// 与 beforeRouteLeave 相同，无法访问 `this`
onBeforeRouteLeave((to, from) => {
  const answer = window.confirm(
    'Do you really want to leave? you have unsaved changes!'
  )
  // 取消导航并停留在同一页面上
  if (!answer) return false
})

const userData = ref()

// 与 beforeRouteUpdate 相同，无法访问 `this`
onBeforeRouteUpdate(async (to, from) => {
  //仅当 id 更改时才获取用户，例如仅 query 或 hash 值已更改
  if (to.params.id !== from.params.id) {
    userData.value = await fetchUser(to.params.id)
  }
})
</script>

组合式 API 守卫也可以用在任何由 <router-view> 渲染的组件中，它们不必像组件内守卫那样直接用在路由组件上。

useLink

Vue Router 将 RouterLink 的内部行为作为一个组合式函数 (composable) 公开。它接收一个类似 RouterLink 所有 prop 的响应式对象，并暴露底层属性来构建你自己的 RouterLink 组件或生成自定义链接：

<script setup>
import { RouterLink, useLink } from 'vue-router'
import { computed } from 'vue'

const props = defineProps({
  // 如果使用 TypeScript，请添加 @ts-ignore
  ...RouterLink.props,
  inactiveClass: String,
}）

const {
  // 解析出来的路由对象
  route,
  // 用在链接里的 href
  href,
  // 布尔类型的 ref 标识链接是否匹配当前路由
  isActive,
  // 布尔类型的 ref 标识链接是否严格匹配当前路由
  isExactActive,
  // 导航至该链接的函数
  navigate
} = useLink(props)

const isExternalLink = computed(
  () => typeof props.to === 'string' && props.to.startsWith('http')
)
</script>

注意在 RouterLink 的 v-slot 中可以访问与 useLink 组合式函数相同的属性。

获取路由对象Router和Route

传递参数和获取数据

在模板中可以直接使用$route
在script标签中无法使用$route，通过使用useRouter 和 useRoute 函数创建router和route对象

使用案例:传递参数

<template>
    <h3>{{state.film.name}}</h3>
    <p>{{state.film.synopsis}}</p>
</template>

<script lang="ts" setup>
// 1- 在模板中可以直接使用$route
// 2- 在script标签中无法使用$route，如何解决？

// 解决方案一：导入router对象
import $router from "@/router";
console.log($router.currentRoute.value.params.filmId);

// 解决方案二：创建router对象
import {useRouter} from "vue-router";
import router from "@/router"
const $router = useRouter();
console.log($router===router);// true
console.log($router.currentRoute.value.params.filmId)

// 解决方案三：创建route对象
import {useRoute} from "vue-router";
const $route = useRoute();
console.log($route.params.filmId)

</script>

使用案例:获取数据

<script lang="ts" setup>
// 导入钩子函数，reactive，watch函数
import {onMounted, reactive, watch} from "vue";
// 导入钩子函数，useRouter函数
import {onBeforeRouteUpdate, useRoute} from "vue-router";
// 导入axios对象
import axios from "axios";
// 创建route对象
const $route = useRoute();
// 创建ref对象
const state = reactive({
    film:{}
})

/////////////////////////////////////////////////
// 获取数据方案一：通过钩子函数
const getway = async function(filmId:string){
     const {data:{data:{film}}} =await axios.get("",{
         headers:{
             "X-Client-Info":'{}',
             "X-Host":"mall.film-ticket.film.info"
         }
     })
     state.film = film;
}
// 导航完成前获取数据
// 定义一个路由更新前的钩子函数
onBeforeRouteUpdate(async function(to,from,next){
     await getway(to.params.filmId as string)
     next();
})
// 导航完成后获取数据
// 挂载完成后执行钩子函数
onMounted(function(){
     getway($route.params.filmId as string)
})

////////////////////////////////////////////////
// 获取数据方案二：通过watch侦听器
watch(()=>$route.params.filmId,async (filmId)=>{
    const {data:{data:{film}}} =await axios.get(,{
        headers:{
            "X-Client-Info":'{}',
            "X-Host":""
        }
    })
    state.film = film;
},{
    immediate:true
})

</script>

编程式导航

除了使用router-link创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。

导航到不同的位置

注意: 下面的示例中的 router 指代路由器实例。在组件内部，你可以使用 $router 属性访问路由，例如 this.$router.push(...)。如果使用组合式 API，你可以通过调用 useRouter() 来访问路由器。

想要导航到不同的 URL，可以使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，会回到之前的 URL。

当你点击 <router-link> 时，内部会调用这个方法，所以点击 <router-link :to="..."> 相当于调用 router.push(...)

声明式	编程式
`<router-link :to="...">`	`router.push(...)`

该方法的参数可以是一个字符串路径，或者一个描述地址的对象。例如

// 字符串路径
router.push('/users/eduardo')

// 带有路径的对象
router.push({ path: '/users/eduardo' })

// 命名的路由，并加上参数，让路由建立 url
router.push({ name: 'user', params: { username: 'eduardo' } })

// 带查询参数，结果是 /register?plan=private
router.push({ path: '/register', query: { plan: 'private' } })

// 带 hash，结果是 /about#team
router.push({ path: '/about', hash: '#team' })

注意：如果提供了 path，params 会被忽略，上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法，你需要提供路由的 name 或手写完整的带有参数的 path

const username = 'eduardo'
// 我们可以手动建立 url，但我们必须自己处理编码
router.push(`/user/${username}`) // -> /user/eduardo
// 同样
router.push({ path: `/user/${username}` }) // -> /user/eduardo
// 如果可能的话，使用 `name` 和 `params` 从自动 URL 编码中获益
router.push({ name: 'user', params: { username } }) // -> /user/eduardo
// `params` 不能与 `path` 一起使用
router.push({ path: '/user', params: { username } }) // -> /user

当指定 params 时，可提供 string 或 number 参数（或者对于可重复的参数可提供一个数组）。任何其他类型（如对象、布尔等）都将被自动字符串化。对于可选参数，你可以提供一个空字符串（""）或 null 来移除它。

由于属性 to 与 router.push 接受的对象种类相同，所以两者的规则完全相同。

router.push 和所有其他导航方法都会返回一个 Promise，让我们可以等到导航完成后才知道是成功还是失败。

替换当前位置

它的作用类似于 router.push，唯一不同的是，它在导航时不会向 history 添加新记录，正如它的名字所暗示的那样——它取代了当前的条目。

声明式	编程式
`<router-link :to="..." replace>`	`router.replace(...)`

也可以直接在传递给 router.push 的 to 参数中增加一个属性 replace: true ：

router.push({ path: '/home', replace: true })
// 相当于
router.replace({ path: '/home' })

横跨历史

该方法采用一个整数作为参数，表示在历史堆栈中前进或后退多少步，类似于 window.history.go(n)

// 向前移动一条记录，与 router.forward() 相同
router.go(1)

// 返回一条记录，与 router.back() 相同
router.go(-1)

// 前进 3 条记录
router.go(3)

// 如果没有那么多记录，静默失败
router.go(-100)
router.go(100)

篡改历史

你可能已经注意到，router.push、router.replace 和 router.go 是 window.history.pushState、window.history.replaceState 和 window.history.go 的翻版，它们确实模仿了 window.history 的 API。

因此，如果你已经熟悉 Browser History APIs，在使用 Vue Router 时，操作历史记录就会觉得很熟悉。

值得一提的是，无论在创建路由器实例时传递什么 history 配置，Vue Router 的导航方法 (push、replace、go) 都能始终正常工作。

使用案例

vue

<template>
    <ul>
        <li v-for="item in state.films" :key="item.filmId">
            <router-link :to="{
                path:'/home/message/'+item.filmId
            }">{{item.name}}</router-link> &nbsp;&nbsp;
            <button @click="goDetail(item.filmId)">push</button> &nbsp;
            <button @click="$router.replace('/home/message/'+item.filmId)">replace</button>
        </li>
    </ul>
    <button @click="$router.forward()">前进</button>
    <button @click="$router.back()">后退</button>
    <hr/>
    <router-view></router-view>
</template>

<script lang="ts" setup>
import {onMounted, reactive} from "vue";
import {useRouter} from "vue-router";
import axios from "axios";
const $router = useRouter();
const goDetail=(filmId:string)=>{
    $router.push('/home/message/'+filmId)
}
let state = reactive({
    films:[]
})

onMounted(function(){
    // https://m.maizuo.com/gateway?cityId=310100&pageNum=1&pageSize=10&type=1&k=6086743
    axios.get('https://m.maizuo.com/gateway?cityId=310100&pageNum=1&pageSize=3&type=1&k=6086743',{
        headers:{
            "X-Client-Info":'{"a":"3000","ch":"1002","v":"5.2.1","e":"16923264631851757969801217","bc":"310100"}',
            "X-Host":"mall.film-ticket.film.list"
        }
    }).then(value=>{
        // console.log(value.data.data.films);
        state.films = value.data.data.films;
    })

})
</script>

<style scoped>

</style>

动态路由

对路由的添加通常是通过 routes 选项来完成的，但是在某些情况下，你可能想在应用程序已经运行的时候添加或删除路由。具有可扩展接口(如 Vue CLI UI )这样的应用程序可以使用它来扩展应用程序

这些函数都是router对象中的方法

添加路由

动态路由主要通过两个函数实现。router.addRoute() 和 router.removeRoute()。它们只注册一个新的路由，也就是说，如果新增加的路由与当前位置相匹配，就需要你用 router.push() 或 router.replace() 来手动导航，才能显示该新路由

// 添加一条新的路由规则记录作为现有路由的子路由。如果该路由规则有 name，并且已经存在一个与之相同的名字，则会覆盖它
// 第一个参数是父亲name的属性值，第二个参数是路由配置信息
addRoute(parentName: string, route: RouteConfig): () => void
addRoute(route: RouteConfig): () => void

只有一个路由的以下路由：

const router = createRouter({
  history: createWebHistory(),
  routes: [{ path: '/:articleName', component: Article }],
})

进入任何页面，/about，/store，或者 /3-tricks-to-improve-your-routing-code 最终都会呈现 Article 组件。

如果我们在 /about 上添加一个新的路由
router.addRoute({ path: '/about', component: About })

页面仍然会显示 Article 组件，我们需要手动调用 router.replace() 来改变当前的位置，并覆盖我们原来的位置（而不是添加一个新的路由，最后在我们的历史中两次出现在同一个位置）

router.addRoute({ path: '/about', component: About })
// 我们也可以使用 this.$route 或 useRoute()
router.replace(router.currentRoute.value.fullPath)

记住，如果你需要等待新的路由显示，可以使用 await router.replace()。

在导航守卫中添加路由

如果你决定在导航守卫内部添加或删除路由，你不应该调用 router.replace()，而是通过返回新的位置来触发重定向

router.beforeEach(to => {
  if (!hasNecessaryRoute(to)) {
    router.addRoute(generateRoute(to))
    // 触发重定向
    return to.fullPath
  }
})

上面的例子有两个假设：第一，新添加的路由记录将与 to 位置相匹配，实际上导致与我们试图访问的位置不同。第二，hasNecessaryRoute() 在添加新的路由后返回 false，以避免无限重定向。

因为是在重定向中，所以我们是在替换将要跳转的导航，实际上行为就像之前的例子一样。而在实际场景中，添加路由的行为更有可能发生在导航守卫之外，例如，当一个视图组件挂载时，它会注册新的路由。

删除路由

有几个不同的方法来删除现有的路由

方式1：

通过添加一个名称冲突的路由。如果添加与现有途径名称相同的途径，会先删除路由，再添加路由：

router.addRoute({ path: '/about', name: 'about', component: About })
// 这将会删除之前已经添加的路由，因为他们具有相同的名字且名字必须是唯一的
router.addRoute({ path: '/other', name: 'about', component: Other })

方式2：

通过调用 router.addRoute() 返回的回调：

const removeRoute = router.addRoute(routeRecord)
removeRoute() // 删除路由如果存在的话
当路由没有名称时，这很有用

方式3

通过使用 router.removeRoute() 按名称删除路由

router.addRoute({ path: '/about', name: 'about', component: About })
// 删除路由
router.removeRoute('about')
需要注意的是，如果你想使用这个功能，但又想避免名字的冲突，可以在路由中使用 Symbol 作为名字。

当路由被删除时，所有的别名和子路由也会被同时删除

添加嵌套路由

要将嵌套路由添加到现有的路由中，可以将路由的 name 作为第一个参数传递给 router.addRoute()，这将有效地添加路由，就像通过 children 添加的一样：

router.addRoute({ name: 'admin', path: '/admin', component: Admin })
router.addRoute('admin', { path: 'settings', component: AdminSettings })

这等效于

router.addRoute({
  name: 'admin',
  path: '/admin',
  component: Admin,
  children: [{ path: 'settings', component: AdminSettings }],
})

查看现有路由

Vue Router 提供了两个功能来查看现有的路由

router.hasRoute()：检查路由是否存在。
router.getRoutes()：获取一个包含所有路由记录的数组

动态路由使用案例

src->main.ts

import {createApp} from "vue";
import App from "@/App.vue";
import router from "@/router";

// 1- getRoutes():获取所有的路由信息列表，类型是一个数组。
const routes = router.getRoutes();
console.log(routes);

// 2- hasRoute():判断路由信息是否存在，参数是路由的名字，返回的是一个布尔值
console.log(router.hasRoute("home"));// true
console.log(router.hasRoute("home2"));// false

// 3- addRoute():添加路由信息，参数是一个路由信息
const renderCom = function(name:string){
     return ()=>import("@/pages/"+name+"/index.vue");
}
const aboutRoute = router.addRoute({
     path: "/about",
     name:"about",
     component:renderCom("About")
})

// 4- removeRoute():删除路由，参数是一个路由的name属性值
// 方式一:通过路由的name，删除路由
console.log(router.hasRoute("about"));
if(router.hasRoute("about")){
     router.removeRoute("about");
}

// 方式二：添加完路由之后会有一个返回值，该返回值是一个函数，调用该函数即可删除
aboutRoute();
console.log(router.getRoutes());


// 挂载APP
createApp(App).use(router).mount("#app")

添加路由的几种方式

路由数据：可以通过接口获取

const routes = [
    {
        path: "/",
        redirect: "/home"
    },
    {
        path: "/home",
        name:"home",
        component: renderCom("Home"),
        children:[
            {
                path:"/home",
                name:"home",
                component:renderCom("Home/NewsList")
            },
            {
                path:"/home/message",
                name:"message",
                component:renderCom("Home/Message"),
                children:[
                    {
                        path:"/home/message/:filmId",
                        component:renderCom("Home/Message/Detail")
                    }
                ]
            }
        ]
    },
    {
        path: "/about",
        name:"about",
        component:renderCom("About")
    },
    {
        path: "/:pathMath(.*)",
        component:renderCom("NotFount")
    }
]

封装导入路由组件的方法

// 扩展：将所有的路由通过方法去添加
// 以下数据是通过接口获取过来的。
const renderCom = function(name:string){
    return ()=>import("@/pages/"+name+"/index.vue");
}

通过addRoute添加路由：src->main.ts

...
// 方式一：直接通过addRoute添加
router.addRoute(routes[0]);
router.addRoute(routes[1]);
router.addRoute(routes[2]);
router.addRoute(routes[3]);

// 方式二：通过遍历addRoute添加
routes.forEach(item=>{
     router.addRoute(item);
})

// 方式三：手动通过路由信息添加
router.addRoute({
     path: "/",
     redirect: "/home"
});
router.addRoute({
     path: "/home",
     name:"home",
     component: renderCom("Home"),
     children:[
         {
             path:"/home",
             name:"home",
             component:renderCom("Home/NewsList")
         },
         {
             path:"/home/message",
             name:"message",
             component:renderCom("Home/Message"),
             children:[
                 {
                     path:"/home/message/:filmId",
                     component:renderCom("Home/Message/Detail")
                 }
             ]
         }
     ]
});
 router.addRoute( {
     path: "/about",
     name:"about",
     component:renderCom("About")
});
router.addRoute({
     path: "/:pathMath(.*)",
     component:renderCom("NotFount")
})

// 方式四：一级路由通过addRoute()路由信息添加，二级路由通过addRoute()函数的参数指定父亲的name属性值添加
// 添加二级路由:第一个参数是父亲name的属性值，第二个参数是路由配置信息
router.addRoute({
    path: "/",
    redirect: "/home"
});
router.addRoute({
    path: "/home",
    name:"home",
    component: renderCom("Home")
});
router.addRoute({
    path: "/about",
    name:"about",
    component:renderCom("About")
});
router.addRoute({
    path: "/:pathMath(.*)",
    component:renderCom("NotFount")
})
// 添加二级路由
router.addRoute("home",{
    path:"/home",
    name:"newList",
    component:renderCom("Home/NewsList")
})
router.addRoute("home", {
    path:"/home/message",
    name:"message",
    component:renderCom("Home/Message")
})
router.addRoute("message",{
    path:"/home/message/:filmId",
    component:renderCom("Home/Message/Detail")
})
// 挂载APP
createApp(App).use(router).mount("#app")

路由 ​

搭建一个基本路由 ​

抽离路由 ​

路由懒加载 ​

把组件按组分块 ​

二级路由 ​

数据获取 ​

导航完成后获取数据 ​

在导航完成前获取数据 ​

组合式API ​

在 setup 中访问路由和当前路由 ​

导航守卫 ​

useLink ​

获取路由对象Router和Route ​

传递参数和获取数据 ​

编程式导航 ​

导航到不同的位置 ​

替换当前位置 ​

横跨历史 ​

篡改历史 ​

使用案例 ​

动态路由 ​

添加路由 ​

在导航守卫中添加路由 ​

删除路由 ​

添加嵌套路由 ​

查看现有路由 ​

动态路由使用案例 ​

路由