重新1

134 阅读1分钟

路由的基本使用

  • 代码实现

QQ图片20220627214811.png

QQ图片20220627214702.png

  • 效果(初始)

QQ图片20220627215122.png

  • 效果(切换路由) QQ图片20220627215130.png

QQ图片20220627215136.png

路由重定向

如果按照上面的写法,我想刚刚进页面就要显示/about路由对应的组件?应该怎么配置路由呢?
这个时候就可以用到路由重定向,把当前路由重定向到指定的某个路由即可
  • 代码实现

QQ图片20220627220707.png

  • 效果

QQ图片20220627220714.png

路由嵌套

  • 代码实现

QQ图片20220627221707.png

  • 效果(初始化)

QQ图片20220627221725.png

  • 效果(子路由切换)

QQ图片20220627221731.png

QQ图片20220627221738.png

  • 思考 :当刚刚进页面的时候就要显示下面的效果,应该怎么做?重定向! QQ图片20220627221731.png
  • 代码实现

QQ图片20220627222445.png

  • 重定向解析
1、 刚刚进页面先会由 http://localhost:8080/ 重定向到 http://localhost:8080/about
2、 再由 http://localhost:8080/about 重定向到 http://localhost:8080/aboutSon1
所以就会有上面的效果

编程式导航

页面导航(路由)分两种

1. 声明式导航
普通网页中的<a>和vue中<router-link>
2. 编程式导航
普通网页中的location.href

vue里面的编程式导航

路由传参

动态路由匹配