vue router1.0 极简示例


<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 vuetitle>
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: `
            
    <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>

    {{ 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>

你可能感兴趣的:(前端框架)