Use vue-router to realize secondary menu content conversion

Secondary menu navigation is a very common function, and most web pages have this function. If it is a common method, it is to change the url and jump to the corresponding page; another way is to frame.
If you use vue, you can use vue-router to change the components in , so that you can jump to the corresponding "page" without refreshing the page. In fact, the url address still changed, but it did not refresh the content elsewhere on the page. It only changed the components in and rendered new components.

html

When using Vue.js, we have already combined the components into an application. When you want to add vue-router, you only need to configure the components and route mapping, and then tell vue-router where to render them.

<div id="app">
 <div class="leftBox">
 <!-- 使用 router-link 组件来导航. -->
 <!-- 通过传入 `to` 属性指定链接. -->
 <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
 <ul>
 <li><router-link to="/" actived>首页</router-link></li>
 <li><router-link to="/article">文章</router-link></li>
 <li><router-link to="/picture">图片</router-link></li>
 <li><router-link to="/music">音乐</router-link></li>
 </ul>
 </div>
 <div class="rightBox">
 <!-- 路由出口 -->
 <!-- 路由匹配到的组件将渲染在这里 -->
 <router-view></router-view>
 </div>
</div>

js

define routes. Each route should map a component. Where "component" can be a component, etc. Create and mount the root instance. Remember to inject routes through the router configuration parameters so that the entire application has routing functions

var Home = {template: &#39;<div>home</div>&#39;}
 
var router = new VueRouter({
 routes: [
 {path: &#39;/&#39;, component: Home},
 {path: &#39;/picture&#39;, component: Picture},
 {path: &#39;/music&#39;, component: Music},
 {path: &#39;/article&#39;, component: Artlist},
 {path: &#39;/article/:id&#39;, component: Article}
 ]
})
new Vue({
 el: "#app",
 router: router
})

When I switched to the article section, I made another article list and clicked on the article title to enter the article content.

I have hardcoded the data here, but I can actually get the data assignment through ajax.

I simulated loading..., and based on data-driven thinking, I used v-if="loading" to determine whether the loading appears.

Remember to specify different keys for animation switching, otherwise it will have no effect.

When creating and changing a route, you must pass the url parameters to a method to get the data. Here you need to create and watch '$route'

To get the url parameters, you need to pass $route.params or $route.query, etc. , please refer to the tutorial for details

To return to the previous level, use router.go(-1), which is equivalent to pressing the back button

var Article = {
 template: &#39;<div class="post">\
 <div class="loading" v-if="loading">loading.....</div>\
 <transition name="slide">\
 <div v-if="post" class="content" :key="post.id">\
 <button @click="back">返回</button>\
 <p>{{post.title}}</p>\
 <P>{{post.body}}</P>\
 </div>\
 </transition>\
 </div>&#39;,
 data: function() {
 return {
 loading: false,
 error: null,
 post: null
 }
 },
 created:function() {
 this.fetchData();
 },
 watch: {
 &#39;$route&#39;: &#39;fetchData&#39;
 },
 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);
 }
 }
}