vue的Router路由

        <div id="app">

            <thead>IT666</thead>

            <router-link to="/foo">foo</router-link>

            <router-link to="/bar">Go to Bar</router-link>

            <router-view></router-view>

        </div>

          

          

        定义模板

        <template id="foo">  <div>

                <p>前端语言</p>

                <img src="img/123.jpg" width="200px"/>

            </div>

        </template>

        <template id="bar">

            <div>

                <p>bar</p>

                <img src="img/456.jpg" width="200px" />

            </div>

        </template>

    //引入js文件

    <script src="https://unpkg.com/vue/dist/vue.js"></script>

    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

    <script >

        //1、配置模板

        let Foo = Vue.extend({

            template:'#foo'

        });

        let Bar = Vue.extend({

                template: "#bar"

        });

          

        //2、定义路由

        const routes = [{  

            path:'/foo',

            component:Foo

        },

        {

            path: '/bar',

            component: Bar

        },

        {

            path:'/',   //修改默认指向

            redirect:'/foo'

        }];

      

        const router = new VueRouter({

            routes

        });

   

        //挂载到app

        new Vue({

            router

        }).$mount('#app');  

      </script>