路由,其实就是指向的意思,当我点击页面上的home按钮时,页面中就要显示home的内容,如果点击页面上的about 按钮,页面中就要显示about 的内容。提到路由,在单页面应用使用的颇为广泛,虽然动态组件也可以满足这一需求,但是它的路径是固定的,用户体验不是很好,所以相比来说路由是一个更优的选择

引用 注册路由模块

关于路由 vue-router------逆战班
通过路由映射表来切换页面,path是浏览器端的地址,component是路径名所对应的组件
关于路由 vue-router------逆战班
让路由在页面显示需要在主页面加一个路由容器,这样就可在浏览器中通过浏览器访问相应页面了

关于路由 vue-router------逆战班
关于路由 vue-router------逆战班

二级路由和嵌套路由区别

二级路由:使用二级路由时 切换到Nowplaying这个路径下 film这个页面就不见了
关于路由 vue-router------逆战班
嵌套路由:使用嵌套路由时,Nowplaying这个页面作为fiml的孩子出现 可以同时看到这两个页面

关于路由 vue-router------逆战班
需要注意的是 务必要在fiml组件中给子组件留位置
关于路由 vue-router------逆战班

导航

关于路由 vue-router------逆战班

声明式导航

< routet-link >是一个组件,该组件用于设置一个导航链接,切换不同 HTML 内容。 to 属性为目标地址, 即要显示的内容;tig属性渲染成某种标签;active-class
设置链接**时使用的 CSS 类名。
关于路由 vue-router------逆战班

编程式导航

关于路由 vue-router------逆战班

相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-09-23
  • 2022-12-23
  • 2022-02-23
  • 2021-09-27
  • 2022-12-23
猜你喜欢
  • 2021-07-11
  • 2021-05-22
  • 2022-02-08
  • 2021-05-31
  • 2022-12-23
  • 2021-08-22
  • 2021-05-20
相关资源
相似解决方案