Vue Router 相关理解 基本路由 多级路由

Vue Router 相关理解

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 核心深度集成，使得构建单页面应用变得轻而易举。以下是一些基本的理解和示例。

基本路由

在 Vue Router 中，基本路由是指单个路由和其对应的组件的关系。下面是一个简单的例子：

import Vue from 'vue'
import Router from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'

Vue.use(Router)

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

const router = new Router({
  routes
})

new Vue({
  router
}).$mount('#app')
在上面的例子中，我们定义了两个基本路由：'/' 对应 Home 组件，'/about' 对应 About 组件。

多级路由

除了基本路由之外，Vue Router 还支持多级路由，也就是嵌套路由。这种路由结构可以帮助我们更好地组织页面和组件。

const routes = [
  { path: '/', component: Home },
  { 
    path: '/about', 
    component: About,
    children: [
      { path: 'history', component: History },
      { path: 'team', component: Team },
      { path: 'contact', component: Contact }
    ]
  }
]

在上面的例子中，‘/about’ 路径下有三个子路由：‘/about/history’、‘/about/team’ 和 ‘/about/contact’，分别对应不同的组件。

Vue Router 进阶用法

Vue Router 是 Vue.js 官方的路由管理器，除了基本的路由配置外，还提供了一些进阶用法，让我们更灵活地管理和控制路由。

动态路由匹配

Vue Router 支持动态路由匹配，允许我们在路由路径中包含参数，并根据参数的不同动态加载相应的组件。例如：

const routes = [
  { path: '/user/:id', component: User }
]
在上述例子中，:id 是一个动态参数，可以匹配任意的用户ID。当访问类似 /user/123 的路径时，Vue Router 会将参数传递给 User 组件，你可以在组件中通过 $route.params.id 来获取参数值。

命名路由
Vue Router 还支持命名路由，使得在程序中链接到特定路由变得更加容易，并且不受路径结构的影响。例如：

[Something went wrong, please try again later.]