當前位置：首頁 > 前端技术 > vue >内容正文

vue

059——VUE中vue-router之路由嵌套在文章系统中的使用方法：

發布時間：2023/11/29 vue 29 豆豆

生活随笔收集整理的這篇文章主要介紹了 059——VUE中vue-router之路由嵌套在文章系统中的使用方法：小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

<!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: {}}},mounted() {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>

總結

以上是生活随笔為你收集整理的059——VUE中vue-router之路由嵌套在文章系统中的使用方法：的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。