Vue绑定和路由-蒲公英云

Vue绑定和路由

第一种方式

注册模板方式

模板内容

将模板加入页面

源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.min-v2.5.16.js"></script>
    <script src="../js/vue-router.min-2.7.0.js"></script>
</head>
<body>
    <div id="app">
        <!-- <span>登录</span>
        <span>注册</span> -->
        <router-link to="/login">登录</router-link>
        <router-link to="/register">注册</router-link>
        <hr />
        <router-view></router-view>
        <!-- <first></first>
            <second></second>
            <register></register> -->
    </div>
    <template id="login">
        <div>
            <h2>登录页</h2>
            <p>账号:<input type="text"></p>
            <p>密码:<input type="password"></p>
        </div>
    </template>
    <template id="register">
        <div>
            <h2>注册页</h2>
            <p>账号:<input type="text`"></p>
            <p>密码:<input type="password`"></p>
            <p>确认密码:<input type="password`"></p>
        </div>
    </template>
</body>
<script>
    //第一种方式
    //let first=Vue.extend({
    //   template:'#login'
    //});
    //第一种简化版
    let first = {
        template: '#login'
    }
    //从第一种方式,第一种注册方式
    //Vue.component('first',first);
    //第二种方式
    Vue.component("second", {
        template: '#login'
    });
    // Vue.component("register",{
    //     template:'#register'
    // });
    let register = {
        template: '#register'
    }
    let router = new VueRouter({
        routes: [
            { path: '/login', component: first },
            { path: '/register', component: register }
        ]
    })
    new Vue({
        el: '#app',
        data: {},
        router
        //第一种方式,第二种注册方式
        //  components:{
        //      first
        //  }
    });
</script>
</html>