VUE路由

步骤分为3步

1、安装router:
2、目录会自动出现src/router/index.js
image.png
3、在router文件里,const routes里添加新的路由和指向的组件

有两种方式:

1)静态引入(运行时就会渲染):

import HomeView from "../views/HomeView.vue"; //静态
component: HomeView

2)动态引入(写法就这样,记住就行,跳转时才会渲染):
component: () =>
  import( "../views/AboutView.vue")
4、在homeview主目录里跳转去具体页面,有两种方式:
1)在方法里写 this.router.push(/login/参数),这样这个方法可以先处理完数据再去跳转
image.png
补充:这里是可以传参的,跳转时直接写/login/1,在router里写的path是 /login/:id
2)router_link直接跳转
image.png
5、在跳转的视图里,是可以显示路由传过来的id的
image.png
补充:

这里的user其实是写了user组件里的内容,官方文档不是基于脚手架写的


bd6dffcfe38ddd2f7672c549d22af06.png
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 1.mvvm 框架是什么? 定义:M:Model(服务器上的业务逻辑操作) V:View(页面)VM:ViewMo...
  • Vue Router 是Vue.js[http://cn.vuejs.org/]官方的路由管理器。它和 Vue.j...
    SY阅读 769评论 0 0
  • 今日目标 1.能够说出什么是路由2.能够说出前端路由的实现原理3.能够使用Vue-Router实现前端路由4.能够...
    蔚完待旭阅读 697评论 0 0
  • 本文转载于前端工匠。如有侵权联系本人立刻删除 一、首先带着问题 要学习vue-ro...
    qiaoguoxing阅读 529评论 0 1
  • 1.1 路由 2. 前端路由 概念:根据不同的用户事件,显示不同的页面内容 本质:用户事件与事件处理函数之间的对应...
    LetKing阅读 453评论 0 1

友情链接更多精彩内容