项目目录
项目基于mall-admin-web-master进行开发
https://github.com/macrozheng/mall-admin-web
定义路由
路由文件位置
index.js
路由文件
其中,最重要的部分是对于页面文件的路由,定义一个constantRouterMap
,其中path
为页面文件所在位置,component
为所要引用的组件,在这里引用了名为 Layout
的组件,redirect
为所要跳转的组件路径,name
为该路由项名称,其中使用方法之一是 :
<router-view name="pms"></router-view> //渲染pms组件
meta
中定义了该路由项的名称和其使用的图标,children
中是该路由项下的子路由项,例如:addProduct中引入了@/views/pms/product/add
中的模板文件,这样就完成了路由项的定义。
页面跳转逻辑
views/pms
index.vue
点击 新增按钮 通过点击事件 调用 methods 下的handleAddProduct()
handleAddProduct()
方法位置
跳转到add.vue
特别注意第二个红框,格式为 冒号值名称-值名称
,必须为**-**隔开的全小写字母组成,:is
,:is_A
,:Is_a
都是不可以的 ,一下是Vue.js官方教程上的一段话:
HTML 中的 attribute 名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时,camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名
add.vue
调用了ProductDetail
组件,并向product-detail
标签传值
ProductDetail
组件中相应的product-detail
标签与export default{}
下props
的isEdit
属性做绑定
下图是该页面下的export default{}
下props
的isEdit
属性的定义,同样,这个属性名称需要是等价的小驼峰写法,例如:is_open
对应 isOpen
,错一点都不能匹配成功
参考文章
浅析vue-router中name的用法 https://blog.csdn.net/weixin_42470791/article/details/82944838
Vue入坑——vue-router的重定向redirect https://my.oschina.net/u/3802541/blog/1811061
Vue: export default中的name属性到底有啥作用呢 https://blog.csdn.net/weixin_39015132/article/details/83573896