{"action":"created","issue":{"url":"https://api.github.com/repos/iview/iview/issues/3484","repository_url":"https://api.github.com/repos/iview/iview","labels_url":"https://api.github.com/repos/iview/iview/issues/3484/labels{/name}","comments_url":"https://api.github.com/repos/iview/iview/issues/3484/comments","events_url":"https://api.github.com/repos/iview/iview/issues/3484/events","html_url":"https://github.com/iview/iview/issues/3484","id":317538646,"number":3484,"title":"[Feature Request][Suggestion] MenuItem Should Support Using <router-link> Inside it","user":{"login":"BinotaLIU","id":3190556,"avatar_url":"https://avatars3.githubusercontent.com/u/3190556?v=4","gravatar_id":"","url":"https://api.github.com/users/BinotaLIU","html_url":"https://github.com/BinotaLIU","followers_url":"https://api.github.com/users/BinotaLIU/followers","following_url":"https://api.github.com/users/BinotaLIU/following{/other_user}","gists_url":"https://api.github.com/users/BinotaLIU/gists{/gist_id}","starred_url":"https://api.github.com/users/BinotaLIU/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/BinotaLIU/subscriptions","organizations_url":"https://api.github.com/users/BinotaLIU/orgs","repos_url":"https://api.github.com/users/BinotaLIU/repos","events_url":"https://api.github.com/users/BinotaLIU/events{/privacy}","received_events_url":"https://api.github.com/users/BinotaLIU/received_events","type":"User","site_admin":false},"labels":[{"id":671667195,"url":"https://api.github.com/repos/iview/iview/labels/may%20be%20supported%20in%20the%20future","name":"may be supported in the future","color":"5319e7","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":{"url":"https://api.github.com/repos/iview/iview/milestones/1","html_url":"https://github.com/iview/iview/milestone/1","labels_url":"https://api.github.com/repos/iview/iview/milestones/1/labels","id":2748011,"number":1,"title":"3.0.0","description":"","creator":{"login":"icarusion","id":5370542,"avatar_url":"https://avatars2.githubusercontent.com/u/5370542?v=4","gravatar_id":"","url":"https://api.github.com/users/icarusion","html_url":"https://github.com/icarusion","followers_url":"https://api.github.com/users/icarusion/followers","following_url":"https://api.github.com/users/icarusion/following{/other_user}","gists_url":"https://api.github.com/users/icarusion/gists{/gist_id}","starred_url":"https://api.github.com/users/icarusion/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/icarusion/subscriptions","organizations_url":"https://api.github.com/users/icarusion/orgs","repos_url":"https://api.github.com/users/icarusion/repos","events_url":"https://api.github.com/users/icarusion/events{/privacy}","received_events_url":"https://api.github.com/users/icarusion/received_events","type":"User","site_admin":false},"open_issues":31,"closed_issues":3,"state":"open","created_at":"2017-09-06T13:41:57Z","updated_at":"2018-04-26T02:09:13Z","due_on":null,"closed_at":null},"comments":1,"created_at":"2018-04-25T09:02:43Z","updated_at":"2018-04-26T11:55:20Z","closed_at":null,"author_association":"NONE","body":"### What problem does this feature solve?\r\n#### Example\r\nTake iView document site for example: https://www.iviewui.com/docs/guide/install  \r\nThe source code [src/components/navigate.vue](https://github.com/iview/iview-doc/blob/master/src/components/navigate.vue) handle the `click` event on MenuItem, then use `this.$router.to` to redirect ([L124](https://github.com/iview/iview-doc/blob/master/src/components/navigate.vue#L124)), called `programmatical navigation`.  \r\nIn this issue, I will use \"fake links\" to call them.  \r\n\r\n#### Why Not Use Programmatical Navigation?\r\nIt is not a good idea to use a programmatical navigation for all links.  \r\nThe main reason is: **These fake links will not have native context menu, such as \"open in new tab\", \"open in new window\", and so on**.  \r\n\r\n#### What I do\r\nBack to the iView document site, I always open multiple pages as once.\r\nIf I opened `Form` page, I maight also want to check the `Input` page. Thus, I will want right click on the `Input` link on the page and open it in a new tab.\r\n\r\nWhen I'm implementing the site navigation for my projects, I always just add a `<router-link>` inside it:  \r\n```html\r\n<Submenu name=\"companies\">\r\n    <template slot=\"title\">\r\n        <Icon type=\"briefcase\" />\r\n        Links\r\n    </template>\r\n    <iMenuItem name=\"all-companies\">\r\n        <router-link to=\"/link-1\">\r\n            Link1\r\n        </router-link>\r\n     </iMenuItem>\r\n</Submenu>\r\n```\r\n\r\nUnfortunatally, the result is not what we expected:  \r\n![screenshot_7](https://user-images.githubusercontent.com/3190556/39236045-35086ad0-48aa-11e8-8911-9fce1b0f04af.jpg)\r\n\r\nThe element `a` is smaller then it's parent not. As the result, if we want to open the link, we have to click on the word exactly.  \r\n\r\n#### Conclusion\r\niView should do suggest in the document of MenuItem, to recommend use `<router-link>`, rather then ask developers to write their own on click event handler. Then optimize the style sheet to compact use `<MenuItem>` with `<a>`\r\n\r\n### What does the proposed API look like?\r\nDescribed above.\r\n\r\n<!-- generated by iview-issues. DO NOT REMOVE -->"},"comment":{"url":"https://api.github.com/repos/iview/iview/issues/comments/384613858","html_url":"https://github.com/iview/iview/issues/3484#issuecomment-384613858","issue_url":"https://api.github.com/repos/iview/iview/issues/3484","id":384613858,"user":{"login":"BinotaLIU","id":3190556,"avatar_url":"https://avatars3.githubusercontent.com/u/3190556?v=4","gravatar_id":"","url":"https://api.github.com/users/BinotaLIU","html_url":"https://github.com/BinotaLIU","followers_url":"https://api.github.com/users/BinotaLIU/followers","following_url":"https://api.github.com/users/BinotaLIU/following{/other_user}","gists_url":"https://api.github.com/users/BinotaLIU/gists{/gist_id}","starred_url":"https://api.github.com/users/BinotaLIU/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/BinotaLIU/subscriptions","organizations_url":"https://api.github.com/users/BinotaLIU/orgs","repos_url":"https://api.github.com/users/BinotaLIU/repos","events_url":"https://api.github.com/users/BinotaLIU/events{/privacy}","received_events_url":"https://api.github.com/users/BinotaLIU/received_events","type":"User","site_admin":false},"created_at":"2018-04-26T11:55:20Z","updated_at":"2018-04-26T11:55:20Z","author_association":"NONE","body":"@winterJIE \r\nThis is not a standard html, also most people write code like this.  \r\n`<Submenu>` generate an `ul` element. According to the html standard, `<ul>` should contain neither `<ul>`, `<ol>` nor `<li>` as it's direct child node.  \r\n  \r\nLet's explain in css selector:  \r\n```css\r\nul > li, ul > ul, ul > ol\r\n```\r\nis a valid structure,  \r\n``` css\r\nul > a > li\r\n```\r\nis invalid."}}
{"actor":{"display_login":"BinotaLIU"}}