37_路由（Vue.router）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            a{
                text-decoration: none;
            }
            .router-link-active{
                text-decoration: underline;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <p>
                <!--设置路由跳转的组件-->
                <router-link to="home">主页</router-link>
                <router-link to="about">关于</router-link>
            </p>
            <!--指定路由入口，通过router-view组件指定入口-->
            <!--keep-alive进行组件缓存-->
            <keep-alive>
                <router-view></router-view>
            </keep-alive>
        
            
        </div>
        <script src="vue.js"></script>
        <!--导入Vue-Router插件-->
        <script src="vue-router.js"></script>
        <script>
//          创建路由对象,配置路由选项,使用不同path时，路由入口加载不同的组件
            const router = new VueRouter({
                //配置路由
                routes:[
                    //home路由
                    {
                        path:'/home',
                        component:{//定义当前路由匹配时router-view所加载的组件
                            //组件
                            template:"<div><h1>HELLO</h1><input/></div>"
                        }
                    },
                    //about路由
                    {
                        path:'/about',
                        component:{
                            template:"<div><h2>WORLD</h2><input /></div>"
                        }
                    }
                    ]
            })
            
            var vm = new Vue({
                el:"#app",
                router
                
            })
        </script>
    </body>
</html>
37_路由（Vue.router）

推荐阅读更多精彩内容
