VUE项目-饿了吗(ele)-项目总结之router(路由)总结(路由传参等)

目录

1.0到2.0的变迁(官网):https://cn.vuejs.org/v2/guide/migration.html

路由(router)目录结构变化

---

创建项目初始化项目模板的时候,会有一个router文件,这是以前没有的,这个项目下有一个index.js文件,这个便是新的路由文件,我想这是为了让main.js的代码减少而准备的,毕竟以前的是放在main.js里的,但是随着界面的增多,路由越来越不方便管理.至于写法和以前无异,所以不再介绍了,主要的变化在于覆盖路由的高亮默认样式上,代码对比:

旧:

新:

新的是在routes后面增加一个属性linkActiveClass:"active"

其中active这个类来自app.vue中的

 

这是路由在本项目中的变化,以下是我自己对路由的一些总结:

使用标签式路由导航<router-link></router-link>

(编译后自动会转换为a标签)

使用router-link注意事件

to:注意这个参数，当需要拼接地址的时候需要在前面加冒号

例如：

无参数：{to=" /photoInfo” }

有参数：{:to=" '/photoInfo?id='  +item.id" }  接收参数{ this.$route.query.id}

拼接技巧：地址加参数名为字符串，但是因为外面to有“””,所以用“’”扩起来，所以建议先不加“””，拼接字符串完成后再添加“””

tag:这个参数可以指定router-link标签由那个标签转化而来，保证样式不会改变

编程式导航：{注：区分this.$route 和this.$router 这两个对象

this.$route：是路由各个的参数(所以获取参数使用这个)

this.$router:是路由的导航对象(跳转使用这个)，可以实现使用js代码进行路由的前进 后退 跳转到新的URL地址中}

1. this.$router.push(“路由地址”+参数);
2. 注意：path和params两个不能同时存在，这样会使params无效
   1. this.$router.push(path:”路由地址”，query：{参数名称：参数}})
   2. this.$router.push({name:”路由名称”，params：{参数名称：参数} })
   3. this.$router.push({path:”路由地址”+参数})

 

根据一上的说法,所以这各项目中的router-link和div可以更改为