vue路由

路由：根据不同的url地址展示不同的内容或者页面
引入vue 和router
这个链接是引入链接 点击即可跳转
https://www.runoob.com/vue2/vue-routing.html

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

 <div id="app">
        <!-- 4.使用路由 outer-link  -->
        <router-link to="/home">首页</router-link>
        <router-link to="/login">登录</router-link>
        <router-link to="/regist">注册</router-link>
        <!-- 5.定义路由视图 -->
        <router-view></router-view>
    </div>
</body>
<script>
    //2.书写页面
    let home = { template: `   <div><h1>home</h1></div> ` }
    let login = { template: `   <div><h1>login</h1></div> ` }
    let regist = { template: `   <div><h1>regist</h1></div> ` }
    //1.使用路由 配置路由 component组件
    let router = new VueRouter({
        routes: [
            { path: "/home", component: home },
            { path: "/login", component: login },
            { path: "/regist", component: regist },

        ]
    })
    //3.可插拔
    new Vue({
        el: "#app",
        router     //注册路由

    })
</script>