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">
            <!-- 如果模板內(nèi)部有多個標簽的情況下，要這些標簽統(tǒng)一放到一個“容器”標簽 -->
            <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.組件之數(shù)據(jù)綁定

<!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">
            <!-- 如果模板內(nèi)部有多個標簽的情況下，要這些標簽統(tǒng)一放到一個“容器”標簽 -->
            <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內(nèi)部都會重新生成數(shù)據(jù)對象，各個組件中數(shù)據(jù)從內(nèi)存地址上看是不同的
                            //這樣組件在多次服用以后医男，不會相互影響到數(shù)據(jù)的變化
                            return {
                                //在ruturn返回的匿名對象里聲明和要綁定的數(shù)據(jù)對象
                                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對象的數(shù)據(jù)',
                    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>我是父組件镀梭，接收子組件傳遞過來的數(shù)據(jù){{mystr}}</h3>
                <subcomponent titles="hello word" v-on:info="receive"></subcomponent>
            </div>
        </template>
        <template id="subcom">
            <div id="">
                <p>我是子組件，我能接收父組件傳遞的數(shù)據(jù){{titles}}</p>
                <input type="button" name="" id="" value="向父組件傳遞數(shù)據(jù)" 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',
                        //數(shù)據(jù)
                        data:function(){
                            return{
                                mystr:''
                            }
                        },
                        //方法
                        methods:{
                            receive(value){
                                this.mystr=value
                            }
                        },
                        components:{
                            'subcomponent':{
                                //模板
                                template:'#subcom',
                                //數(shù)據(jù)
                                data:function(){
                                    return {
                                        mess:'我是子組件的數(shù)據(jù)'
                                    }
                                },
                                //屬性
                                props:['titles'],
                                //傳遞數(shù)據(jù)
                                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'
            }
            // 把組件和路由關(guān)聯(lián)在一起
            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
                }]
            }]
            // 把路由數(shù)組傳遞到路由器對象
            let myrounter=new VueRouter({
                routes:myroutes
            })
            
            // 把路由器對象傳遞給Vue對象
            let z=new Vue({
                el:'#app',
                data:{
                    
                },
                router:myrounter
            })
        </script>
    </body>
</html>

7.以query傳遞參數(shù)

<!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>企業(yè)信息查看</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傳遞參數(shù)

<!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>企業(yè)信息查看</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.路由守衛(wèi)者

<!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
            })
            //路由守衛(wèi)者
            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();
                    }
                }
                // 業(yè)務代碼運行完畢，再去調(diào)用下一個路由守衛(wèi)者
                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樣式的動畫關(guān)鍵字*/
            @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代表圖片的動畫屬性
                 動畫屬性需要三個值：動畫名 運行時間 循環(huán)情況*/
                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}})
                    }
                }
            }
            // 根據(jù)頁面組件做路由表
            const myroutes=[{
                path:'/p1',
                component:p1
            },{
                path:'/p2',
                component:p2
            },{
                path:'/p3',
                component:p3
            },{
                path:'/p4',
                component:p4
            }]
            // 創(chuàng)建路由器
            let myrouter=new VueRouter({
                routes:myroutes
            })
            
            let z=new Vue({
                el:'#container',
                data:{
                    
                },
                router:myrouter,
                // 當頁面載入時透罢，會發(fā)生什么樣的行為
                mounted:function(){
                    // 游戲頁面初始載入時，應該先載入第一頁
                    this.$router.push('/p1')
                }
            })
        </script>
    </body>
</html>

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末冠蒋，一起剝皮案震驚了整個濱河市羽圃，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌抖剿，老刑警劉巖朽寞，帶你破解...
沈念sama閱讀 216,591評論 6贊 501
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件识窿，死亡現(xiàn)場離奇詭異，居然都是意外死亡脑融，警方通過查閱死者的電腦和手機喻频，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 92,448評論 3贊 392
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來吨掌，“玉大人半抱，你說我怎么就攤上這事脓恕∧に危” “怎么了？”我有些...
開封第一講書人閱讀 162,823評論 0贊 353
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵炼幔，是天一觀的道長秋茫。經(jīng)常有香客問我，道長乃秀，這世上最難降的妖魔是什么肛著？我笑而不...
開封第一講書人閱讀 58,204評論 1贊 292
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮跺讯，結(jié)果婚禮上枢贿，老公的妹妹穿的比我還像新娘。我一直安慰自己刀脏，他們只是感情好局荚，可當我...
茶點故事閱讀 67,228評論 6贊 388
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著愈污，像睡著了一般耀态。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上暂雹，一...
開封第一講書人閱讀 51,190評論 1贊 299
城市分裂傳說
那天首装，我揣著相機與錄音，去河邊找鬼杭跪。笑死仙逻，一個胖子當著我的面吹牛，可吹牛的內(nèi)容都是我干的涧尿。我是一名探鬼主播系奉，決...
沈念sama閱讀 40,078評論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼现斋！你這毒婦竟也來了喜最？” 一聲冷哼從身側(cè)響起，我...
開封第一講書人閱讀 38,923評論 0贊 274
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤庄蹋，失蹤者是張志新（化名）和其女友劉穎瞬内，沒想到半個月后迷雪，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 45,334評論 1贊 310
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡虫蝶，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 37,550評論 2贊 333
?白月光啟示錄
正文我和宋清朗相戀三年章咧，在試婚紗的時候發(fā)現(xiàn)自己被綠了。大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片能真。...
茶點故事閱讀 39,727評論 1贊 348
活死人
序言：一個原本活蹦亂跳的男人離奇死亡赁严，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出粉铐，到底是詐尸還是另有隱情疼约，我是刑警寧澤，帶...
沈念sama閱讀 35,428評論 5贊 343
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布蝙泼，位于F島的核電站程剥，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏汤踏。R本人自食惡果不足惜织鲸，卻給世界環(huán)境...
茶點故事閱讀 41,022評論 3贊 326
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望溪胶。院中可真熱鬧搂擦，春花似錦、人聲如沸哗脖。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,672評論 0贊 22
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽懒熙。三九已至丘损，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間工扎，已是汗流浹背徘钥。一陣腳步聲響...
開封第一講書人閱讀 32,826評論 1贊 269
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留肢娘，地道東北人呈础。一個月前我還...
沈念sama閱讀 47,734評論 2贊 368
代替公主和親
正文我出身青樓，卻偏偏與公主長得像橱健，于是被迫代替她去往敵國和親而钞。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
茶點故事閱讀 44,619評論 2贊 354

Vue之組件&路由

1.組件

2.組件之數(shù)據(jù)綁定

3.組件之屬性

4.子組件向父組件傳遞

5.路由

6.路由嵌套

7.以query傳遞參數(shù)

8.以params傳遞參數(shù)

路由埠偿，組件綜合案例

推薦閱讀更多精彩內(nèi)容