Vue之组件&路由

1.组件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="app">
            <mytag></mytag>
            <mypag></mypag>
            <loginfrom></loginfrom>
            <aaalogin></aaalogin>
        </div>
        <script type="text/javascript">
            //全局组件
            Vue.component('mytag',{
                //模板属性：声明组件里的用到的HTML标签
                template:'<h1>标题1</h1>'
            })
            Vue.component('mypag',{
                template:'<p>啊啊啊</p>'
            })
            Vue.component('loginfrom',{
                template:`<form>
                <input type="text" placeholder="用户名"/><br>
                <input type="text" placeholder="密码"/><br>
                </form>`
            })
            Vue.component('aaalogin',{
                template:`<form action="">
                <input type="text" name="" id="" placeholder="注册id" ><br>
                <input type="text" name="" id="" placeholder="真实姓名" ><br>
                <input type="text" name="" id="" placeholder="用户密码" ><br>
                <select >
                    <option value ="1">沈阳</option>
                    <option value ="2">大连</option>
                    <option value ="3">锦州</option>
                </select>
                <br>
                <input type="radio" name="a" id="" value="female" /><label>女</label>
                <input type="radio" name="a" id="" value="male" /><label>男</label>
                <br>
                <input type="checkbox" name="" id="" value="music" /><label>音乐</label>
                <input type="checkbox" name="" id="" value="chess" /><label>棋类</label>
                <input type="checkbox" name="" id="" value="game" /><label>游戏</label>
                <br>
                <textarea rows="10" cols="10" ></textarea>
                <input type="submit" name="" id="" value="提交" />
            </form>`
            })
            let z=new Vue({
                el:'#app',
                data:{
                    
                }
            })
        </script>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <title></title>
    </head>
    <body>
        <template id="if">
            <!-- 如果模板内部有多个标签的情况下，要这些标签统一放到一个“容器”标签 -->
            <form action="">
                <input type="text" name="" id="" value="" placeholder="用户名" />
                <input type="password" name="" id="" value="" placeholder="密码" />
                <input type="submit" name="" id="" value="登录" />
            </form>
        </template>
        <template id="ss">
            <form action="">
                <input type="text" name="" id="" placeholder="注册id" ><br>
                <input type="text" name="" id="" placeholder="真实姓名" ><br>
                <input type="text" name="" id="" placeholder="用户密码" ><br>
                <select >
                    <option value ="1">沈阳</option>
                    <option value ="2">大连</option>
                    <option value ="3">锦州</option>
                </select>
                <br>
                <input type="radio" name="a" id="" value="female" /><label>女</label>
                <input type="radio" name="a" id="" value="male" /><label>男</label>
                <br>
                <input type="checkbox" name="" id="" value="music" /><label>音乐</label>
                <input type="checkbox" name="" id="" value="chess" /><label>棋类</label>
                <input type="checkbox" name="" id="" value="game" /><label>游戏</label>
                <br>
                <textarea rows="10" cols="10" ></textarea>
                <input type="submit" name="" id="" value="提交" />
            </form>`
        </template>
        <div id="app">
            <myloginform></myloginform>
            <mylogin></mylogin>
        </div>
        <script type="text/javascript">
            let z=new Vue({
                el:'#app',
                data:{
                    
                },
                components:{
                    'myloginform':{
                        template:'#if'
                    },                  
                    'mylogin':{
                        template:'#ss'
                    }
                }
            })
        </script>
    </body>
</html>

2.组件之数据绑定

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <title></title>
    </head>
    <body>
        <template id="if">
            <!-- 如果模板内部有多个标签的情况下，要这些标签统一放到一个“容器”标签 -->
            <form action="">
                <input type="text" name="" id="" v-model="user.uid" placeholder="用户名" />
                <input type="password" name="" id="" v-model="user.pwd" placeholder="密码" />
                <input type="submit" name="" id="" value="登录"  v-on:click.prevent="cheak()"/>
            </form>
        </template>
        <div id="app">
            <myloginform></myloginform>
        
        </div>
        <script type="text/javascript">
            let z=new Vue({
                el:'#app',
                data:{
                    
                },
                components:{
                    'myloginform':{
                        template:'#if',
                        data:function(){
                            //组件每次声明后，data内部都会重新生成数据对象，各个组件中数据从内存地址上看是不同的
                            //这样组件在多次服用以后，不会相互影响到数据的变化
                            return {
                                //在ruturn返回的匿名对象里声明和要绑定的数据对象
                                user:{
                                    uid:'',
                                    pwd:''
                                }
                            }
                        },
                        //组件中data对象声明的等价形式
                        data(){
                            return {
                                
                            }
                        }
                        methods:{
                            cheak(){
                                console.log("用户名"+this.user.uid+"，密码"+this.user.pwd)
                            }
                        }
                    }
                }
            })
        </script>
    </body>
</html>

3.组件之属性

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
                .showcolor{
                    color: red;
                }
                .showbg{
                    background-color: yellow;
                }
        </style>
        <title></title>
    </head>
    <body>
        <div id="app">
            <!-- 直接给属性进行传值，给了一个字符串常量welcome -->
            <mypage mytxt="welcome"></mypage>
            <mypage v-bind:mytxt="outertxt"></mypage>
            <mypage v-bind:mytxt="outertxt" v-bind:mycolor="className"></mypage>
            <mypage v-bind:mytxt="outertxt" v-bind:mycolor="className" v-bind:mybg="bgName"></mypage>
        </div>
        <script type="text/javascript">
            let z=new Vue({
                el:'#app',
                data:{
                    outertxt:'来Vue对象的数据',
                    className:'showcolor',
                    bgName:'showbg'
                },
                components:{
                    'mypage':{
                        template:'<p v-bind:class="[mycolor,mybg]">{{mytxt}}</p>',
                        props:['mytxt','mycolor','mybg']
                    }
                }
            })
        </script>
    </body>
</html>

4.子组件向父组件传递

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <title></title>
    </head>
    <body>
        <template id="mycom">
            <div id="">
                <h3>我是父组件，接收子组件传递过来的数据{{mystr}}</h3>
                <subcomponent titles="hello word" v-on:info="receive"></subcomponent>
            </div>
        </template>
        <template id="subcom">
            <div id="">
                <p>我是子组件，我能接收父组件传递的数据{{titles}}</p>
                <input type="button" name="" id="" value="向父组件传递数据" v-on:click="send"/>
            </div>
        </template>
        
        <div id="app">
            <mycomponent></mycomponent>
        </div>
        <script type="text/javascript">
            let z=new Vue({
                el:'#app',
                data:{
                    
                },
                components:{
                    'mycomponent':{
                        //模板
                        template:'#mycom',
                        //数据
                        data:function(){
                            return{
                                mystr:''
                            }
                        },
                        //方法
                        methods:{
                            receive(value){
                                this.mystr=value
                            }
                        },
                        components:{
                            'subcomponent':{
                                //模板
                                template:'#subcom',
                                //数据
                                data:function(){
                                    return {
                                        mess:'我是子组件的数据'
                                    }
                                },
                                //属性
                                props:['titles'],
                                //传递数据
                                methods:{
                                    send(){
                                        this.$emit('info',this.mess)
                                    }
                                }
                            }
                        }
                    }
                }
            })
        </script>
    </body>
</html>

5.路由

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/vue-router.js" type="text/javascript" charset="utf-8"></script>
        <title></title>
    </head>
    <body>
        <div id="app">
            <input type="button" name="" id="" value="点击" v-on:click="test" />
            <router-view></router-view>
        </div> 
        <template id="main">
            <div id="">
                <h3>应用首页</h3>
            </div>
        </template>
        <script type="text/javascript">
            const main={
                template:'#main'
            }
            const myroutes=[{
                path:'/main',
                component:main
            }]
            let myrouter=new VueRouter({
                routes:myroutes
            })
            
            let z=new Vue({
                el:'#app',
                data:{
                    
                },
                router:myrouter,
                methods:{
                    test(){
                        this.$router.push('/main')
                    }
                }
            })
        </script>
    </body>
</html>

6.路由嵌套

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/vue-router.js" type="text/javascript" charset="utf-8"></script>
        <title></title>
    </head>
    <body>
        <template id="first">
            <div>
                <h3>课堂派首页</h3>
            </div>
        </template>
        <template id="second">
            <div>
                <h3>合作渠道</h3>
            </div>
        </template>
        <template id="third">
            <div>
                <router-link to="/third/A">解决方案一</router-link>
                <router-link to="/third/B">解决方案二</router-link>
                <router-view></router-view>
                <h3>解决方案</h3>       
            </div>
        </template>
        <template id="thirdA">
            <div>
                <h3>解决方案A</h3>
            </div>
        </template>
        <template id="thirdB">
            <div>
                <h3>解决方案B</h3>
            </div>
        </template>
        <div id="app">
            <router-link to="/first">首页</router-link>
            <router-link to="/second">第二页</router-link>
            <router-link to="/third">第三页</router-link>
            <router-view></router-view>
        </div>
        <script type="text/javascript">
            // 表示第一页组件
            const first={
                template:'#first'
            }
            // 表示第二页组件
            const second={
                template:'#second'
            }
            // 表示第三页组件
            const third={
                template:'#third'
            }
            const thirdA={
                template:'#thirdA'
            }
            const thirdB={
                template:'#thirdB'
            }
            // 把组件和路由关联在一起
            const myroutes=[{
                path:'/first',
                component:first
            },{
                path:'/second',
                component:second
            },{
                path:'/third',
                component:third,
                children:[{
                    path:'/third/A',
                    component:thirdA
                },{
                    path:'/third/B',
                    component:thirdB
                }]
            }]
            // 把路由数组传递到路由器对象
            let myrounter=new VueRouter({
                routes:myroutes
            })
            
            // 把路由器对象传递给Vue对象
            let z=new Vue({
                el:'#app',
                data:{
                    
                },
                router:myrounter
            })
        </script>
    </body>
</html>

7.以query传递参数

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/vue-router.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <template id="main">
            <div id="">
                <h3>应用首页</h3>
                <p>
                    {{this.$route.query.pname}}
                </p>
                <p>
                    {{this.$route.query.price}}
                </p>
            </div>
        </template>
        <template id="info">
            <div id="">
                <h3>企业信息查看</h3>
            </div>
        </template>
        <div id="app">
            <input type="button" name="" id="" value="点击" v-on:click="test()" />
            <input type="button" name="" id="" value="另一个点击" v-on:click="move()" />
            <router-view></router-view>
        </div>
        <script type="text/javascript">
            const main = {
                template: '#main'
            }
            const info = {
                template: '#info'
            }

            const myroutes = [{
                path: '/main',
                component: main
            }, {
                path: '/info',
                component: info
            }]

            let myrouter = new VueRouter({
                routes: myroutes
            })


            let vm = new Vue({
                el: '#app',
                data: {

                },
                router: myrouter,
                methods: {
                    test() {
                        this.$router.push({path:'/main',query:{pname:'计算机',price:2000}});
                    },
                    move() {
                        this.$router.push('/info')
                    }
                }
            });
        </script>
    </body>
</html>

8.以params传递参数

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/vue-router.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <template id="main">
            <div id="">
                <h3>应用首页</h3>
                <p>
                    {{this.$route.params.pname}}
                </p>
                <p>
                    {{this.$route.params.price}}
                </p>
            </div>
        </template>
        <template id="info">
            <div id="">
                <h3>企业信息查看</h3>
                <p>
                    {{this.$route.params.pname}}
                </p>
                <p>
                    {{this.$route.params.price}}
                </p>
            </div>
        </template>
        <div id="app">
            <input type="button" name="" id="" value="点击" v-on:click="test()" />
            <input type="button" name="" id="" value="另一个点击" v-on:click="move()" />
            <router-view></router-view>
        </div>
        <script type="text/javascript">
            const main = {
                template: '#main'
            }
            const info = {
                template: '#info'
            }

            const myroutes = [{
                path: '/main',
                name:'main',
                component: main
            }, {
                path: '/info',
                name:'info',
                component: info
            }]

            let myrouter = new VueRouter({
                routes: myroutes
            })


            let vm = new Vue({
                el: '#app',
                data: {

                },
                router: myrouter,
                methods: {
                    test() {
                        this.$router.push({name:'main',params:{pname:'计算机',price:2000}})
                    },
                    move() {
                        this.$router.push({name:'info',params:{pname:'计算机',price:2000}})
                    }
                }
            });
        </script>
    </body>
</html>

9.声明式路由传参

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
       <script src="js/vue-router.js" type="text/javascript" charset="utf-8"></script>
       <title></title>
   </head>
   <body>
       <template id="first">
           <div id="">
               {{this.$route.query.name}}
               {{this.$route.query.age}}
           </div>
       </template>
       <template id="second">
           <div id="">
                {{this.$route.params.name}}
                {{this.$route.params.age}}
           </div>
       </template>
       <template id="third">
           <div id="">
                <p>{{this.$route.params.name}}</p>
           </div>
       </template>
       <div id="app">
           <router-link v-bind:to="{path:'/p1',query:{name:'李',age:18}}">第一种方法</router-link>
           <router-link v-bind:to="{name:'p2',params:{name:'李济',age:20}}">第二种方法</router-link>
           <router-link to="/p3/李">第三种方法</router-link>
           <router-view></router-view>
       </div>
       <script type="text/javascript">
           const first={
               template:'#first'
           }
           const second={
               template:'#second'
           }
           const third={
               template:'#third'
           }
           const myroutes=[{
               path:'/p1',
               component:first
           },{
               path:'/p2',
               name:'p2',
               component:second
           },{
               path:'/p3/:name',
               component:third
           }]
           let myrouter=new VueRouter({
               routes:myroutes
           })
           
           let z=new Vue({
               el:'#app',
               data:{
                   
               },
               router:myrouter
           })
       </script>
   </body>
</html>

10.路由守卫者

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/vue-router.js" type="text/javascript" charset="utf-8"></script>
        <title></title>
    </head>
    <body>
        <div id="app">
            <router-link to='/loginform'>登录</router-link>
            <router-link to='/main'>主页面</router-link>
            <router-link to='/advertise'>招商页面</router-link>
            <router-view>
            </router-view>
        </div>
        <template id="loginform">
            <form action="">
                <input type="text" name="" id="" v-model="uid" placeholder="id"/><br>
                <input type="password" name="" id="" v-model="pwd" placeholder="pwd"/><br>
                <input type="submit" name="" id="" value="登录" v-on:click.prevent="check" />
            </form>
        </template>
        <template id="main">
            <h3>主页面</h3>
        </template>
        <template id="advertise">
            <h3>广告招商</h3>
        </template>
        
        
        
        <script type="text/javascript">
            const loginform={
                template:'#loginform',
                data(){
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    return {
                        uid:'',
                        pwd:''
                    }
                },
                methods:{
                    check(){
                        if(this.uid=='li'&&this.pwd=='123'){
                            z.flag=true;
                            this.$router.push('/main')
                        }else{
                            this.$router.push('/loginform')
                        }
                    }
                }
            }
            const main={
                template:'#main'
            }
            const advertise={
                template:'#advertise'
            }
            const myrouters=[{
                path:'/loginform',
                component:loginform
            },{
                path:'/main',
                component:main
            },{
                path:'/advertise',
                component:advertise
            },{
                path:'/',
                redirect:'/loginform'
            }]
            
            let myrouter=new VueRouter({
                routes:myrouters
            })
            //路由守卫者
            myrouter.beforeEach((to,from,next)=>{
                //写上你的代码
                const ps=['/main','/advertise']
                if(ps.indexOf(to.path)>=0){
                    // flag为假，用户未登录
                    if(!z.flag){
                        //如果用户未登录，导航到登录页面
                        myrouter.push('/loginform')
                        window.location.reload();
                    }
                }
                // 业务代码运行完毕，再去调用下一个路由守卫者
                next();
            })
            
            
            let z=new Vue({
                el:'#app',
                data:{
                    flag:false
                },
                router:myrouter
            })
        </script>
    </body>
</html>

路由，组件综合案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>抽灵符</title>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/vue-router.js" type="text/javascript" charset="utf-8"></script>
        <style>
            
            #page1{
                background-image: url(img/halloween1.jpg);
                background-size:cover;
                /*display显示方式*/
                /*display: none;*/
                
            }
            #page2{
                background-image: url(img/halloween2.jpg);
                background-size:cover;
                /* display: none; */
            }
            #page3{
                background-image:url(img/halloweenMain.jpg);
                background-size:cover;
                /* display: none; */
            }
            #page4{
                /* background-image: url(img/charm1.jpg); */
                background-size:cover;
                /* display: none; */
            }
            div{
                height: 100%;
            }
            body{
                height: 100%;
            }
            html{
                height: 100%;
            }
            
            
            #pk{
                position: fixed;
                top:50px;
                left:300px;
            }
            #start{
                position: fixed;
                bottom: 300px;
                left:360px;
            }
            /*y1带代表第一个怪物的动画名
             @keyframes是CSS3样式的动画关键字*/
            @keyframes y1{
                /*0%代表动画起点*/
                0%{
                    left:40px;
                    top:80px;
                }
                /*30%代表下降*/
                30%{
                    left:40px;
                    top:200px;
                }
                /*70%向右上滑动的动作*/
                70%{
                    left:120px;
                    top:120px;
                }
                /*100%动画的终点*/
                100%{
                    left:40px;
                    top:80px;
                }
            }
            #c1{
                position: fixed;
                /*animation代表图片的动画属性
                 动画属性需要三个值：动画名 运行时间 循环情况*/
                animation: y1 5s infinite;
            }
            #c2{
                position: fixed;
                animation: y2 10s infinite;
            }
            @keyframes y2{
                0%{
                    left: 210px;
                    top: 460px;
                }
                30%{
                    left: 280px;
                    top: 490px;
                }
                70%{
                    left:400px;
                    top:490px;
                }
                100%{
                    left: 210px;
                    top:460px;
                }   
            }
             #c3{
                position: fixed;
                animation: y3 8s infinite;
            }
            /*动画的起点*/
            @keyframes y3{
                /*动画的起点*/
                0%{
                    left: 40px;
                    top: 420px;
                }
                50%{
                    left: 400px;
                    top: 620px;
                }
                /*动画的终点*/
                100%{
                    left: 40px;
                    top: 420px;
                }
            }
            #c7{
                position: fixed;
                /*left:850px;
                top:1250px;*/
                right:50px;
                bottom:300px;
                animation: y7 5s infinite;
            }
            @keyframes y7{
                0%{
                    width:110px;
                    height: 130px;
                }
                50%{
                    width: 14px;
                    height: 16px;
                }
                100%{
                    width: 110px;
                    height: 130px;
                }
            }
            @keyframes y6{
                0%{
                    left:300px;
                    top:750px;
                }
                50%{
                    left:300px;
                    top:1190px;
                }
                100%{
                    left:300px;
                    top:750px;
                }
                
                
            }
            
            #c6{
                position: fixed;
                animation: y6 8s infinite;
            }
            @keyframes y5{
                0%{
                    left:400px;
                    top:880px;
                }
                50%{
                    left:400px;
                    top:930px;
                }
                100%{
                    left:400px;
                    top:880px;
                }
            }
            #c5{
                position: fixed;
                animation: y5 6s infinite;
            }
             @keyframes y4{
                0%{
                    left:600px;
                    top:50px;
                }
                    
                20%{
                left:700px;
                top:100px;
                }
                    
                40%{
                left:700px;
                top:600px;
                }
                
                80%{
                left:700px;
                top:100px;
                }
                100%{
                left:600px;
                top:50px;
                }
             }
             #c4{
                position: fixed;
                animation: y4 10s infinite;
             }
             @keyframes bm{
                from{
                    bottom: 210px;
                    left:300px;
                }
                to{
                    bottom: 210px;
                    left:280px;
                }
                
             }
             #box{
                position: fixed;
                bottom: 210px;
                left:300px;
                animation: bm 1s infinite;
            }
            /*show*/
            @keyframes ts{
                from{
                    /*0完全透明*/
                    opacity: 0;
                }
                to{
                    /*完全不透明*/
                    opacity: 1;
                }
            }
            #title{
                position: fixed;
                left:300px;
                top:50px;
                animation: ts 3s;
            }
            
            
        </style>
    
    </head>
    <body>
        <!--page1\2\3\4以四个DIV形式代表四个页面-->
        <template id="p1">
            <div id="page1">
                <!--src：source来源-->
                <img id="title" src="img/title.png"/>
                <img id="box" src="img/box.png" v-on:click="forward"  />
            </div>
        </template>
        <template id="p2">
            <div id="page2">
                <img id="pk" src="img/pumpkin.png"/>
                <img id="start" src="img/startGame.jpg" v-on:click="forward"/>
                
            </div>
        </template>
        <template id="p3">
            <div id="page3">
                <img id="c1" src="img/1.png" v-on:click="forward(1)" />
                <img id="c2" src="img/2.png" v-on:click="forward(2)"/>
                <img id="c3" src="img/3.png" v-on:click="forward(3)"/>
                <img id="c4" src="img/4.png" v-on:click="forward(4)"/>
                <img id="c5" src="img/5.png" v-on:click="forward(5)"/>
                <img id="c6" src="img/6.png" v-on:click="forward(6)"/>
                <img id="c7" src="img/7.png" v-on:click="forward(7)"/>
                
            </div>
        </template>
        <template id="p4">
            <div id="page4" v-bind:style="{backgroundImage:'url(img/charm'+this.$route.query.mynum+'.jpg)'}">
                <img src="img/back.png" v-on:click="forward" >
            </div>
        </template>
        
        
        <div id="container">
            <router-view></router-view>
        </div>
        <script type="text/javascript">
            // 四个模板组件
            const p1={
                template:'#p1',
                methods:{
                    forward(){
                        this.$router.push('/p2')
                    }
                }
            }
            const p2={
                template:'#p2',
                methods:{
                    forward(){
                        this.$router.push('/p3')
                    }
                }
            }
            const p3={
                template:'#p3',
                methods:{
                    forward(num){
                        this.$router.push({path:'/p4',query:{mynum:num}})
                    }
                }
            }
            const p4={
                template:'#p4',
                methods:{
                    forward(num){
                        this.$router.push({path:'/p3',query:{mynum:num}})
                    }
                }
            }
            // 根据页面组件做路由表
            const myroutes=[{
                path:'/p1',
                component:p1
            },{
                path:'/p2',
                component:p2
            },{
                path:'/p3',
                component:p3
            },{
                path:'/p4',
                component:p4
            }]
            // 创建路由器
            let myrouter=new VueRouter({
                routes:myroutes
            })
            
            let z=new Vue({
                el:'#container',
                data:{
                    
                },
                router:myrouter,
                // 当页面载入时，会发生什么样的行为
                mounted:function(){
                    // 游戏页面初始载入时，应该先载入第一页
                    this.$router.push('/p1')
                }
            })
        </script>
    </body>
</html>

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 216,240评论 6赞 498
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 92,328评论 3赞 392
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 162,182评论 0赞 353
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 58,121评论 1赞 292
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 67,135评论 6赞 388
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 51,093评论 1赞 295
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 40,013评论 3赞 417
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,854评论 0赞 273
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 45,295评论 1赞 310
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,513评论 2赞 332
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,678评论 1赞 348
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,398评论 5赞 343
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,989评论 3赞 325
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,636评论 0赞 22
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,801评论 1赞 268
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 47,657评论 2赞 368
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,558评论 2赞 352

Vue之组件&路由

1.组件

2.组件之数据绑定

3.组件之属性

4.子组件向父组件传递

5.路由

6.路由嵌套

7.以query传递参数

8.以params传递参数

路由，组件综合案例

推荐阅读更多精彩内容