vue-router细讲

Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。

带参数的动态路由匹配
带参数的动态路由匹配在前端开发中，动态路由是指根据 URL 中的参数来匹配不同的路由规则。这可以让我们根据不同的参数来渲染不同的页面或组件。带参数的动态路由匹配是指在路由规则中使用占位符来匹配 URL 中的参数。占位符以冒号 (:) 开头，后面跟参数名称。例如，以下路由规则定义了一个名为 id 的参数：
```
{
  path: '/user/:id',
  component: User
}
```
当用户访问 /user/123 URL 时，id 参数将被赋值为 123，然后路由器会将该参数传递给 User 组件。在 User 组件中，我们可以通过 this.$route.params 对象来访问参数值：
```
export default {
  name: 'User',
  props: {},
  data () {
    return {
      user: {}
    }
  },
  created () {
    const id = this.$route.params.id
    // 使用 id 获取用户信息
    this.getUser(id)
  },
  methods: {
    getUser (id) {
      // ...
    }
  }
}
```
嵌套路由
嵌套路由是指在一个路由规则中包含另一个路由规则。这可以让我们将路由组织成树形结构，以便更好地管理大型应用。 </br> 在 Vue Router 中，我们可以通过 children 属性来定义嵌套路由。例如，以下代码定义了一个嵌套路由
```
const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Home,
      children: [
        {
          path: 'user',
          component: User
        },
        {
          path: 'about',
          component: About
        }
      ]
    }
  ]
})
```
在这个示例中，/ 路由是一个父路由，它包含两个子路由：/user 和 /about。
嵌套路由的使用
我们可以使用嵌套路由来实现以下功能：
1. 在同一个页面中显示不同的内容
2. 在不同的页面之间导航
3. 控制子路由的显示和隐藏
编程式导航
编程式导航是指通过代码来控制路由导航，而不是使用
等声明式导航组件。
router.push() 和 router.replace()
```
// 使用 router.push() 方法导航到 /user
router.push('/user')

// 使用 router.replace() 方法导航到 /about
router.replace('/about')
```
router.go()
router.go() 方法用于向前或向后跳转历史记录堆栈中的记录
```
// 向前跳转一个记录
router.go(1)

// 向后跳转一个记录
router.go(-1)
```
router.back() 和 router.forward()
router.back() 和 router.forward() 方法分别用于向后和向前跳转历史记录堆栈中的记录。
命名路由和重定向路由

命名路由
在 Vue Router 中，我们可以通过 name 属性来为路由规则指定名称。例如，以下代码定义了一个命名路由
```
{
  path: '/user',
  name: 'user',
  component: User
}
```
我们可以通过 router.push({ name: 'user' }) 的方式来跳转到名为 user 的路由
重定向路由
在 Vue Router 中，我们可以通过 redirect 属性来定义重定向路由。例如，以下代码定义了一个重定向路由：
```
{
  path: '/login',
  redirect: '/home'
}
```
路由守卫
路由守卫是 Vue Router 提供的一种机制，用于在导航过程中执行一些操作。我们可以使用路由守卫来实现以下功能：
1. 登录拦截
2. 权限控制
3. 数据预加载
4. 页面跳转前/后的确认
Vue 3 中提供了三种类型的路由守卫：
全局路由守卫
全局路由守卫可以用于实现登录拦截、权限控制等功能。
```
router.beforeEach((to, from, next) => {
  // 判断用户是否登录
  if (isAuthenticated()) {
    next()
  } else {
    next('/login')
  }
})
```
在这个示例中，我们使用 beforeEach 全局路由守卫来判断用户是否登录。如果用户已登录，则允许导航继续；如果用户未登录，则重定向到 /login URL。
组件内路由守卫
路由独享守卫可以用于实现特定的路由导航逻辑。
```
export default {
  name: 'User',
  props: {},
  data () {
    return {
      user: {}
    }
  },
  beforeRouteEnter (to, from, next) {
    // 获取用户 ID
    const id = to.params.id

    // 获取用户信息
    this.getUser(id)

    next()
  },
  created () {
    // ...
  },
  methods: {
    getUser (id) {
      // ...
    }
  }
}
```
在这个示例中，我们使用 beforeRouteEnter 组件内守卫来获取用户信息。
路由独享守卫
路由独享守卫可以用于实现特定的路由导航逻辑。
```
const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      component: User,
      beforeEnter: (to, from, next) => {
        // 获取用户 ID
        const id = to.params.id

        // 判断用户是否存在
        if (userExists(id)) {
          next()
        } else {
          next('/404')
        }
      }
    }
  ]
})
```
在这个示例中，我们使用 beforeEnter 路由独享守卫来判断用户是否存在。如果用户存在，则允许导航继续；如果用户不存在，则重定向到 /404 URL。
路由懒加载
Vue Router 支持路由懒加载，这意味着只有当路由被访问时，才会加载对应的组件。这样可以提高应用程序的性能，因为只有需要的组件才会被加载。
```
const User = () => import('./components/User.vue')
const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      component: User
    }
  ]
})
```
在这个示例中，我们使用 import 函数来懒加载 User 组件。只有当访问 /user/:id URL 时，才会加载 User 组件。

vue-router细讲

vue-router细讲

带参数的动态路由匹配

嵌套路由

嵌套路由的使用

编程式导航

router.push() 和 router.replace()

router.go()

router.back() 和 router.forward()

命名路由和重定向路由

命名路由

重定向路由

路由守卫

全局路由守卫

组件内路由守卫

路由独享守卫

路由懒加载

CATALOG

FEATURED TAGS

FRIENDS