vue-router命名路由

時間 2019-12-12

原文原文鏈接

<!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,
                 <!-- 命名路由 -->
                 name:"frontEnd"
                },
                {path:"/backEnd",
                 component:Be,
                  <!-- 命名路由 -->
                 name:"backEnd"
                }
               ]
            })
            var App={
                template:`
                <div>
                    <!-- router被渲染成a元素，to渲染成href屬性 -->
                    <router-link :to="{name:'frontEnd'}">前端</router-link>
                    <router-link :to="{name:'backEnd'}">後端</router-link>
                    <!-- //路由的試圖 -->
                    <router-view></router-view>
                </div>
                `
            }
            //router掛載到實例上
            new Vue({
                el:"#app",
                router,
                template:`
                <App/>
                `,
                components:{
                    App
                }
            })
        </script>
    </body>
</html>

相關標籤/搜索