登录
原创

vue2-框架使用注意事项

发布于 2022-02-24 阅读 1517
  • 前端
  • Vue.js
原创
  1. 路由配置中,子路由的path前面不用加 ‘/’,子路由写在 children: [] 中,例如- - -
    {
    path: ‘/home’,
    component: Home,
    redirect: ‘/home/users’,
    children: [
    { path: ‘users’, component: Users },
    { path: ‘rights’, component: Rights },
    { path: ‘goods’, component: Goods },
    { path: ‘orders’, component: Orders },
    { path: ‘settings’, component: Settings },
    { path: ‘userdetail/:id’, component: UserDetail, props: true }
    ]
    }
  2. 路由配置时,可开启路由参数传递:props: true,开启后路由指向组件可以通过 props 进行数据接收,例如:路由- - - { path: ‘/home/user/:id’, component: User, props: true },在 User 组件中,可以 props: [‘id’] 来接收 参数id值
  3. 路由守卫有好几种,最常用的是路由前置守卫,用于登录验证,router.beforeEach((to, from, next) => {…} ,to.path- - -可以获取到要访问的路由,from- - - 将要离开的路由,next- - -放行,允许去到要访问的路由,next(‘url’)- - -强制跳转,例如:next(‘/login’) 强制跳到登录页,next(false)- - -停在当前页,不跳转。具体使用方法,和其他的路由守卫可以百度查阅文档
  4. 在 js 中 获取路由信息可以使用:this.route 例如- - -this.route.params.id,可以打印this.route查看里面有哪些信息,然后获取自己想要的;路由跳转的使用:this.router,例如- - - this.<math><semantics><mrow><mi>r</mi><mi>o</mi><mi>u</mi><mi>t</mi><mi>e</mi><mi>r</mi><mi mathvariant="normal">.</mi><mi>b</mi><mi>a</mi><mi>c</mi><mi>k</mi><mo>(</mo><mo>)</mo><mo separator="true">,</mo><mi>t</mi><mi>h</mi><mi>i</mi><mi>s</mi><mi mathvariant="normal">.</mi></mrow><annotation encoding="application/x-tex">router.back(),this.</annotation></semantics></math>router.back(),this.router.forward(); 在 vue 的 html 中,使用 route,router,前面不要加 ‘this’, 否则会报错

评论区

零00
7粉丝

时光荏苒,我自清欢

0

0

0

举报