<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue-router之路由嵌套在文章系统中的使用方法:</title> <script src="vue.js"></script> <script src="vue-router.js"></script> </head> <body> <div id="demo"> <router-view></router-view> </div> <script type="text/x-template" id="home"> <div> <li v-for="v in news"> <router-link :to="{name:'content',params:{id:v.id}}">{{v.title}}</router-link> </li> <router-view></router-view> </div> </script> <script type="text/x-template" id="content"> <div> <h1>{{field.title}}——{{field.id}}</h1> <div> {{field.content}} </div> <router-link to="/">返回首页</router-link> </div> </script> <script> var data = [ {id: 1, title: 'php课程', content: 'php是非常牛的课程'}, {id: 2, title: 'java课程', content: 'java是非常牛的课程'} ]; const home = { template: "#home", data() { return { news: data } } } const content = { template: "#content", data() { return { field: {} } }, watch:{ '$route'(to,from){ this.load(); } }, mounted() { this.load(); }, methods: { load() { var id = this.$route.params.id; for (let k = 0; k < data.length; k++) { if (data[k].id == id) { this.field = data[k] } } } } }; let routes = [ { path: '/', component: home, children: [ {path: '/content/:id', component: content, name: 'content'} ] }, ]; let router = new VueRouter({routes}); new Vue({ el: "#demo", router }); </script> </body> </html>