Vue combat record (1) --- only for your own reference

2019.10.1 ------ bottom tab bar

 

1, the use of common components tab bar tab bar vant of Tabbar

Vant first need to install and rely on demand incorporated inside main.js

 

 

 

Do not always just write a static layout, the components of which there is data (stored inside an array of objects, easy access), generated using v-for and the way property is bound page structure tag elements inside the use of property.

            

 

 2, the navigation programming jump achieve route

This vant tab bar comes to realize routing attributes the jump (triggered when the tab bar that comes with change event switch tabs) use our own programmatic way to achieve

change event method for routing jump method is this. $ router.replace ( 'route') where the value of active is clicked name attribute value of the tag 

Tag specified in namethe case of property, v-modelthe value of the current labelname 下面的代码就是实现了点击标签跳转到与标签名一致的路由

   

 

 3. The Tabbar separate components, in the root element App, the structure is

 

< router-view />

Before that needs to be done is a common component Tabbar introduced and registered, will be effective to create the above

 

 4, establish routing component

Creating Home, Recommend and User folder views inside, and were new index.jx documents in that file (by default go to this folder)

 

 5, router routing component is introduced inside the folder and file index.js rules establish a routing table

 

 

 

 

 

 

 

 

 

 

Guess you like

Origin www.cnblogs.com/zyl0123/p/11615495.html