vue-router的简单使用
程序员文章站
2023-11-02 16:01:22
vue-router的使用简介
##vue-router##
>以 / 开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径。...
vue-router的使用简介
##vue-router## >以 / 开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径。 **push** // 字符串 router.push('home') // 对象 router.push({ path: 'home' }) // 命名的路由 router.push({ name: 'user', params: { userid: 123 }}) // 带查询参数,变成 /register?plan=private router.push({ path: 'register', query: { plan: 'private' }}) **注意:** const userid = 123 router.push({ name: 'user', params: { userid }}) // -> /user/123 router.push({ path: `/user/${userid}` }) // -> /user/123 **这里的 params 不生效** router.push({ path: '/user', params: { userid }}) // -> /user ##router.go(n)## // 在浏览器记录中前进一步,等同于 history.forward() router.go(1) // 后退一步记录,等同于 history.back() router.go(-1) // 前进 3 步记录 router.go(3) // 如果 history 记录不够用,那就默默地失败呗 router.go(-100) router.go(100) ##命名路由## const router = new vuerouter({ routes: [ { path: '/user/:userid', name: 'user', component: user } ] }) <router-link :to="{ name: 'user', params: { userid: 123 }}">user</router-link> 这跟代码调用 router.push() 是一回事: router.push({ name: 'user', params: { userid: 123 }}) ##路由井号## >mode:"history"
上一篇: php实现监听事件