您的位置:首页 > Web前端 > Vue.js

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

2018-10-08 15:01 573 查看

目录

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无效 this.$router.push(path:”路由地址”,query:{参数名称:参数}})
  3. this.$router.push({name:”路由名称”,params:{参数名称:参数} })
  4. this.$router.push({path:”路由地址”+参数})

 

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

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: