vue router1.0 极简示例

最新推荐文章于 2020-12-20 06:31:31 发布

Sophia1010

最新推荐文章于 2020-12-20 06:31:31 发布

阅读量3.5k

点赞数

分类专栏：前端框架

本文链接：https://blog.csdn.net/sophia1010/article/details/53079158

版权

前端框架专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <title>learning vue</title>
</head>
<body>

    <div id="app-container">
        <router-view></router-view>
    </div>


<script src="vendor/vue.js"></script>
<script src="vendor/vue-router.js"></script>

<script>
    Vue.config.debug = true;
    Vue.use(VueRouter);
    var AppComponent = Vue.extend({
        data: function(){
            return {
                list: [
                    { id: '10001', name: 'C#', message: 'Hello C#' },
                    { id: '10002', name: 'Java', message: 'Hello Java.' },
                    { id: '10003', name: 'C++', message: 'Hello C++' },
                    { id: '10004', name: 'JavaScript', message: 'Hello JavaScript' }
                ]
            };
        }
    });
    var LangListComponent = Vue.extend({
        template: `
            <ul>
                <li v-for="item in $root.list">
                    <a v-link="{ path: '/lang/' + item.id }">{{ item.name }}</a>
                </li>
            </ul>
        `
    });
    var LangDetailComponent = Vue.extend({
        template: `
            <div>
                <h1>{{ model.name }}</h1>
                <p>{{ model.message }}</p>
            </div>
        `,

        computed: {
            model: function(){
                var list = this.$root.list;
                var id = this.$route.params.id;
                for(var i = 0; i < list.length; i++){
                    if(list[i].id === id){
                        return list[i];
                    }
                }
            }
        }
    });

    var router = new VueRouter();
    router.map({

        '/': { component: LangListComponent },
        '/lang/:id': { component: LangDetailComponent }


    });
    router.start(AppComponent, '#app-container');
</script>

</body>
</html>

Sophia1010

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue router1.0 极简示例

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <title>learning vue<
复制链接

扫一扫