vue框架的vue-router路由的运用

佚名 6年前 (2019-04-18) 随笔 1151人围观抢沙发百度已收录

用 Vue.js + Vue Router 创建单页应用，是非常简单的。使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把 Vue Router 添加进来，我们需要做的是，将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="../node_modules/vue/dist/vue.js"></script>
        <script src="../node_modules/vue-router/dist/vue-router.js"></script>
    </head>
    <body>
        <div id="app"></div>
        <script>
            // 声明组件
            var Fe={
                template:`
                 <div>我是前端</div>
                `
            }
            var Be={
                template:`
                <div>我是后端</div>
                `
            }
            <!-- //创建路由对象 -->
            var router=new VueRouter({
              routes:[
                {path:"/frontEnd",
                 component:Fe
                },
                {path:"/backEnd",
                 component:Be
                }
               ]
            })
            var App={
                template:`
                <div>
                    <!-- router被渲染成a元素，to渲染成href属性 -->
                    <router-link to="/frontEnd">前端</router-link>
                    <router-link to="/backEnd">后端</router-link>
                    <!-- //路由的试图 -->
                    <router-view></router-view>
                </div>
                `
            }
            //router挂载到实例上
            new Vue({
                el:"#app",
                router,
                template:`
                <App/>
                `,
                components:{
                    App
                }
            })
        </script>
    </body>
</html>