vue-router 的常见用法

最新推荐文章于 2024-09-11 17:04:07 发布

小脆筒style

最新推荐文章于 2024-09-11 17:04:07 发布

阅读量1.9k

点赞数 2

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_46672830/article/details/121189139

版权

本文介绍了 Vue Router 的常见用法，包括路由重定向、嵌套路由、动态路由的原理与实践，以及编程式导航和导航守卫的详细用法。通过实例展示了如何配置路由规则、使用 props 传递参数、控制页面访问权限等关键概念。

摘要由CSDN通过智能技术生成

vue-router 的常见用法

1. 路由重定向

路由重定向指的是：用户在访问地址 A 的时候，强制用户跳转到地址 C ，从而展示特定的组件页面。
通过路由规则的 redirect 属性，指定一个新的路由地址，可以很方便地设置路由的重定向：

const router = new VueRouter({
   
  routes:[  // 在 routes 数组中，声明路由的匹配规则
    // 当用户访问 / 的时候，通过 redirect 属性跳转到 /home对于的路由规则
    {
    path: '/', redirect: '/home'},
    // path 表示要匹配的hash地址； component 表示要展示的路由组件
    {
    path: '/home', component: Home },
    {
    path: '/movie', component: Movie },
    {
    path: '/about', component: About }
  ]
})