Using Vue-router to realize two-level menu content conversion _javascript Skills

Second-level menu navigation is a very common function, the general Web page will have this function. If it is the usual practice to change the URL, jump to the corresponding page; another is the frame.
If you use Vue, you can use Vue-router to change the components in the <router-view>, so that you can not refresh the page can jump to the corresponding "page." In fact, the URL address has changed, but he did not refresh the contents of other locations on the page, but changed the components in <router-view>, rendering the new components.
Online Demo:http://runjs.cn/code/9th3cgxo

Html

With Vue.js, we've assembled the components into an application, and when you add Vue-router, you just configure the components and routing mappings, and then tell Vue-router where to render them.

<div id= "App" >
 <div class= "Leftbox" >
 <!--Use the Router-link component to navigate.-->
 <!--by passing in ' to ' property to specify the link. -->
 <!--<router-link> Default will be rendered as a ' <a> ' tag-->
 <ul>
 <li><router-link To= "/" Actived> home </router-link></li>
 <li><router-link to= "/article" > Article </ router-link></li>
 <li><router-link to= "/picture" > Pictures </router-link></li>
 <li><router-link to= "/music" > Music </router-link></li>
 </ul>
 </div >
 <div class= "Rightbox" >
 <!--route export-->
 <!--route matching to the component will render here-->
 < router-view></router-view>
 </div>
</div>

Js

Defines a route. Each route should map a component. Where "component" can be a component and so on. Create and Mount Root instances. Remember to inject routing through the router configuration parameters, so that the entire application has routing capabilities

var home = {Template: ' <div>home</div> '}

var router = new Vuerouter ({
 routes: [
 {path: '/', compo Nent:home},
 {path: '/picture ', component:picture},
 {path: '/music ', component:music},
 {path: '/article ' , component:artlist},
 {path: '/article/:id ', component:article}
 ]
}
new Vue ({
 el: "#app",
 Router:router
})

When I switched to the article section, I also got a list of articles and clicked on the title of the article to enter the article.

• Here I am writing dead data, actually can get the data assignment through Ajax.
• I simulate the loading ..., according to the data-driven thinking, through the v-if= "loading" to determine whether the loading appear.
• Animation switch Remember to specify a different key, otherwise there is no effect.
• When you create and change routes, you get the data by passing the parameters of the URL to a method where you created and watch ' $route '
• Take the URL parameter is through $route.params or $route.query, and so on, specifically see the tutorial
• Return to the previous level is with Router.go (-1), equivalent to pressing the return button
  

var Article = {
 Template: ' <div class= post ' >\ <div ' class= loading ' v-if= loading
 ... </div>\
 <transition name= "Slide" >\ <div v-if= "
 post" class= "content": key= "Post.id" >\
 <button @click = "Back" > Return to </button>\
 <p>{{post.title}}</p>\
 <p>{{ Post.body}}</p>\
 </div>\
 </transition>\
 </div> ',
 data:function () { Return
 {
 loading:false,
 error:null,
 post:null
 }
 },
 created:function () {
 This.fetchdata ();
 },
 watch: {
 ' $route ': ' Fetchdata '
 },
 methods: {
 Fetchdata: function () {
 this.error = This.post = null;
 This.loading = true;
 Getpost (this. $route. Params.id, (err,post) => {
 this.loading = false;
 if (err) {
 this.error = err.tostring ();
 } else {
 This.post = Post
 }}}
 ,
 back:function () {
 router.go ( -1)
}}}

This article has been organized into the "Vue.js front-end component Learning course", welcome to learn to read.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.