vue路由跳转问题

1,205 阅读1分钟

1.step1:创建.vue文件 3.png

2.step2建路由。

4.png

3.建立路由跳转。

5.png

6.png

在创建的 routers 对象中, path 配置了路由的路径,component 配置了映射的组件

需要注意的是,export default routers 必须写在文件底部,而且后面还需要接一空行,否则无法通过 ESlint 语法验证。 在配置的路由后面,添加 children,并在 children 中添加二级路由,就能实现路由嵌套 配置 path 的时候,以 " / " 开头的嵌套路径会被当作根路径,所以子路由的 path 不需要添加 " /

路由添加动态参数:

如果对于所有 ID 各不相同的用户,都要使用 home 组件来渲染,可以在 routers.js 中添加动态参数:

{ path: '/home/:id', component: Home } 这样 "/home/user01"、"/home/user02"、"/home/user03" 等路由,都会映射到 Home 组件。然后还可以使用 $route.params.id 来获取到对应的 id

编程式导航

很多按钮在执行跳转之前,还会执行一系列的方法,这时可以使用

来修改url,完成跳转。

7.png