How to mount a route entry to the head of a vue, and how to mount a vue

How to mount a route entry to the head of a vue, and how to mount a vue

The route is written, but the correct way to switch the route is not to enter the address in the address bar. The way to switch is to click the navigation menu in the header, just like this.

Click the discovery, follow, and message above to switch the route navigation.

Let's write the navigation of the header first.

Open header. vue

First, write the basic format of the vue component

Then start layout and write the header

Sorry, I always thought the header. vue was introduced. Actually, there is no ........

Open the app and rewrite the vue.

App. vue code:

<Template> <div id = "app"> <! -- Element-ui container layout --> <el-container> <! -- Header --> <el-header> <! -- Header component rendering --> 
Write header. vue, the code here can basically copy directly from the element-ui official website, address: http://element-cn.eleme.io/#/zh-CN/
<Template> <el-row> <! -- Logo on the left --> <el-col: span = "4" class = "logo">  </el-col> <! -- Intermediate navigation area --> <el-col: span = "16"> <el-menu: default-active = "activeIndex2" class = "menu" router mode = "horizontal" @ select = "handleSelect" background-color = "#545c64" text-color = "# fff" active-text-color = "# ffd04b"> <el-menu-item index = "1"> processing center </el-menu-item> <el-submenu index =" 2 "> <template slot =" title "> my workbench </template> <el-menu-item index =" 2-1 "> Option 1 </el-menu- item> <el-menu-item index = "2-2"> Option 2 </el-menu-I Tem> <el-menu-item index = "2-3"> Option 3 </el-menu-item> </el-submenu> <el-menu-item index = "3"> <a href = "https://www.ele.me" rel = "external nofollow" target = "_ blank"> order management </a> </el-menu-item> </ el-menu> </el-col> <! -- User Information on the right and login registration --> <el-button-group> <el-button type = "danger" size = "small" round> login </el-button> <el-button type = "success" size = "small" round> regin </el-button> </el-button-group> </el-row> </template> <script> export default {//...} </script> <style scoped> </style>
This is the case in the browser.

It looks ugly, but this is not the point. When we click the navigation, he jumps directly
<el-menu-item index="2-1">xxxxxx<el-menu-item>,Here, the most stupid way is to change the index value, but this is not flexible enough ....
The general method for writing navigation is as follows:
<Template> <el-row> <! -- Logo on the left --> <el-col: span = "4" class = "logo">  </el-col> <! -- Intermediate navigation area --> <el-col: span = "16"> <el-menu: default-active = "$ route. path "class =" menu "router mode =" horizontal "@ select =" handleSelect "background-color =" #545c64 "text-color =" # fff "active-text-color = "# ffd04b"> <! -- Cyclically written route. if the route contains "hidden: true", no loops are added. --> <template v-for = "route in $ router. options. routes" v-if = "! Route. hidden "> <! -- The loop does not have a route for children --> <el-menu-item v-if = "! Route. hasChild ": key =" route. path ": index =" route. path ">{{ route. name }}</el-menu-item> <! -- Loop route with children --> <el-submenu v-else: index = "route. path "> <template slot =" title "> {route. name }}</template> <el-menu-item v-for = "child in route. children ": index =" child. path ": key =" child. path "> {child. name }}</el-menu-item> </el-submenu> </template> </el-menu> </el-col> <! -- User Information on the right and login registration --> <el-button-group> <el-button type = "danger" size = "small" round> login </el-button> <el-button type = "success" size = "small" round> regin </el-button> </el-button-group> </el-row> </template> <script> export default {//... methods: {handleSelect () {console. log ('callback operation after menu select') }}</script> <style scoped> </style>
This effect in the browser




In this way, the jump after clicking the navigation menu is completely normal, so the write advantage is very flexible, if you want to add the icon, you can also directly in the router/index. add the class: classname field to the routing configuration section in js, and then output the data during the loop. Of course, the navigation menu of the home page is generally not displayed here. We can directly add a hidden: true in the routing configuration to achieve this.
Just like this



Effect


You only need to make a simple modification.
In this way, you can mount the route on the navigation bar, and then write the style and complete the header. vue function.
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.