zoukankan      html  css  js  c++  java
  • 060——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: {}
                }
            },
            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>
    

      

  • 相关阅读:
    神经网络-FPN 19
    机器学习
    神经网络-DenseNet 18
    神经网路骨架:各自的特点统计
    转载:一步一步制作根文件系统
    设计模式博客
    【转】PowerPC平台linux设备移植
    【收藏】自己动手写编译器、连接器
    查看pthread线程库中锁的持有者方法
    【转】深入 Linux 的进程优先级
  • 原文地址:https://www.cnblogs.com/yiweiyihang/p/8310653.html
Copyright © 2011-2022 走看看