Shulou(Shulou.com)06/03 Report--

This article mainly explains "how to add links to vuejs", the content of the explanation is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "vuejs how to add links" bar!

Vuejs add link method: 1, create html code "..."; 2, through "navigation:function () {...}" add link.

This article operating environment: Windows7 system, Vue2.9.6, Dell G3 computer.

How does vuejs add links?

How to add a link to vue.js:

The js code is:

Navigation:function () {new Vue ({el:'# navUl', data: {menuData: {'personal Home': 'personal-home.html',' Talent Analysis': 'personal-analysis.html' 'basic information': 'personal-info-base.html',' skill attitude': 'skill-attitude.html',' participate in the project': 'involved-project.html',' study': 'learn.html',' attendance': 'work-attend.html' 'Life benefits': 'welfare.html'}}, computed: {curIdx:function () {var curIdx = 0 $.each (this.menuData,function (kline v) {if (location.pathname.indexOf (v)! =-1) {/ / description includes (i.e. current page) return false } else {/ / = =-1 does not include (not the current page) curIdx++;}}); console.log (curIdx); return curIdx });}

The html code is:

{{name+'--'+index}}

Description: the idea is that each page corresponds to an index value, for example: when switching to the basic information page, index=2, if curIdx is also equal to 2, then index==curIdx, add the curr class, the text turns red, and the page jump adds a link to the text, not caused by the click event

So when you switch to the personal home page, when curIdx==0; switches to the talent analysis page, when curIdx==1; switches to the basic information page, curIdx==2; and so on

For the basic information page: in the js file, loop this.menuData, first the current link does not include the content of the first link personal-home.html, so location.pathname.indexOf (v) = =-1, then curIdx increases from 0 to 1

Then in the second loop, the current link does not include the contents of the second link personal-analysis.html, so location.pathname.indexOf (v) = =-1, and the curIdx is increased from 1 to 2

Then the third loop, the current link includes the contents of the third link personal-info-base.html, so location.pathname.indexOf (v)! =-1, at this time return out false,curIdx==2

That is to say, the curIdx of the basic information page is 2; at this point, index==curIdx is added to the current curr class name.

Thank you for your reading, the above is the content of "how to add links to vuejs". After the study of this article, I believe you have a deeper understanding of how to add links to vuejs, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.