vue+vue-router 實現單頁面應用

時間 2019-11-17

標籤 vue+vue vue router 實現頁面應用简体版

原文原文鏈接

前端路由的實現原理

爲何要作單頁面應用？javascript

(1) 傳統的開發方式url改變後，立馬發送請求響應整個頁面, 有可能資源過多,傳統開發會讓前端的頁面出現"白屏", 用戶體驗較差
(2) SPA單頁面應用：錨點值的改變後不會馬上發送請求, 而是在某個合適的時機, 發送ajax請求, 局部改變頁面中的數據, 頁面不馬上跳轉

前端路由html

1 錨點值監視
2 ajax獲取動態的數據
3 核心點是錨點值的改變

如何使用vue-router

下載 vue-router

npm init --yes
npm install vue-router --save

1 引入vue-router模塊默認會拋出一個VueRouter對象另外還有兩個全局的組件 router-link, router-view

<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/vue-router.js"></script>

2 使用VueRouter

Vue.use(VueRouter);

3 建立路由對象

// 建立一個路由對象
var router = new VueRouter({
        // 配置路由對象

        routes:[
            {
                path:'/login',
                component:Login
            },
            {
                path:'/register',
                component:Register
            }
        ]

    });

4 路由對象掛載到vue實例化對象中

var App = {
        template:`
            <div>
                <!--router-link默認會被渲染成a標籤 to屬性默認會被渲染成href屬性-->
                <router-link :to="{name:'login'}">登陸頁面</router-link>
                <router-link :to="{name:'register'}">註冊頁面</router-link>
        
                <!--路由組件的出口-->

                <router-view></router-view>

            </div>
        `
    };

    new Vue({
        el:'#app',
        components:{
            App
        },
        //掛載
        router,
        template:`<App />`
    });

使用實例：前端

<div id="app"></div>
<script type="text/javascript" src="node_modules/vue-router/dist/vue-router.js"></script>
<script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>

<script>
    // 讓vue使用VueRouter建立
    Vue.use(VueRouter);

    var Login = {
        template: `
                <div>登陸頁面</div>
            `
    };

    var Register = {
        template: `
                <div>註冊頁面</div>
            `,

    }
    // 建立一個路由對象
    var router = new VueRouter({
            // 配置路由對象

            routes:[
                {
                    path:'/login',
                    component:Login
                },
                {
                    path:'/register',
                    component:Register
                }
            ]

        });

    var App = {
        // router-link默認會被渲染成a標籤 to屬性默認會被渲染成href屬性
        template: `
            <div>

                <router-link to="/login">登陸頁面</router-link>
                <router-link to="/register">註冊頁面</router-link>
                    <!--路由組件的出口-->
                <router-view></router-view>
            </div>
        `
    };
    new Vue({
        el: '#app',
        components: {
            App
        },
        router,
        template: `<App/>`

    })

5 命名路由

給當前的配置路由信息對象設置name:'login'屬性
:to = "{name:'login'}"
<router-link :to="{name:'login'}">登錄</router-link>
<router-link :to="{name:'register'}">註冊</router-link>

var router = new VueRouter({
    routes:[
        {
            path:'/login',
            name:'login',
            component: Login
        },
        {
            path:"/register",
            name:"register",
            component:Register
        }
    ]
});

6 路由規範

(1) xxxx.html#/user/1vue

//配置路由對象  
   
var userParam = {
    template:"<div>用戶1</div>",
    created(){
        console.log(this.$router);
        console.log(this.$route);
        console.log(this.$route.params.user_id)
    }
};


{
    path:'/user/:id',
    component:User
}

<router-link :to = "{name:'user',params:{id:1}}"></router-link>

(2) xxxx.html#/user?userId = 1java

var userQuery = {
    template:"<div>用戶2</div>",
    created(){
        console.log(this.$router);
        console.log(this.$route);
        console.log(this.$route.query.user_id)
    }
};

{
    path:'/user'
}
 <router-link :to = "{name:'user',query:{id:1}}"></router-link>

//在組件內部經過this.$route 獲取路由信息對象

7 嵌套路由

<body>
    <div id="app"></div>
    <script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
    <!-- 1.引入 vue-router的對象 -->
    <script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
    <!-- 全局的VueRouter對象   vue-router 還給我們提供了兩個全局的組件 router-link  router-view-->
    <script type="text/javascript">

        // 嵌套路由:
        // 需求:進入首頁以後 點擊音樂/hone/music  電影 /home/movie
        Vue.use(VueRouter);


        var Home = {
            template:`
                <div>
                    <br/>
                    <router-link to="/home/music">音樂</router-link>
                    <router-link to="/home/moive">電影</router-link>
                    <! --子路由組件-->
                    <router-view></router-view>
                </div>
            `,

        };

        var Music = {
            template:`
                <div> 我是音樂</div>
            `
        };

        var Moive = {
            template:`
                <div> 我是電影</div>
            `
        };

        // 3.建立一個路由對象
        var router = new VueRouter({
            // 配置路由對象

            routes:[
                {
                    // 根目錄默認跳轉到home
                    path:'/',
                    redirect:'/home'
                    // redirect:{name:'home'}
                },

                {
                    path: '/home',
                    name:'home',
                    component:Home,
                    children:[
                        // 動態路由匹配表示自組件中的結構是不一樣的

                        // 當訪問/home時， Home組件的出口是不會渲染任何內容, 這是由於沒有匹配到合適的子路由
                        {
                            path:'',
                            component:Music
                        },
                        {
                            path:'music',
                            component:Music
                        },
                        {
                            path:'moive',
                            component:Moive
                        }
                    ]

                }
            ]

        });
        var App = {
            template:`
                <div>
                    <router-link :to="{name:'home'}">首頁</router-link>

                    <router-view></router-view>
                </div>
            `,

        };

        new Vue({
            el:'#app',
            components:{
                App
            },
            router,
            template:`<App />`
        });
    </script>
</body>
</html>

8 動態路由匹配

<body>
    <div id="app"></div>
    <script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
    <!-- 1.引入 vue-router的對象 -->
    <script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
    <!-- 全局的VueRouter對象   vue-router 還給我們提供了兩個全局的組件 router-link  router-view-->
    <script type="text/javascript">

        Vue.use(VueRouter);

        var Timeline = {

            template:`
                <div>
                    <router-link :to="{name:'comDesc', params:{id:'安卓'}}">安卓</router-link>
                    <router-link :to="{name:'comDesc', params:{id:'前端'}}">前端</router-link>
                    <router-link :to="{name:'comDesc', params:{id:'python'}}">python</router-link>
                    <router-link :to="{name:'comDesc', params:{id:'JAVA'}}">JAVA</router-link>
                    <router-view></router-view>
                </div>
            `,

        };

        var Pins = {
            template:`
                <div> 我是沸點</div>
            `
        };


        // 共同的子組件
        var ComDesc = {
             data(){
                return {
                    msg:''
                }
            },
            template:`
                <div>
                    我是一個{{msg}}
                </div>
            `,

             created(){
                this.msg = '安卓'
            },

            watch:{
                 '$route'(to, from){
                     console.log(to);
                     console.log(from);
                     this.msg = to.params.id
                 }
            }

        };


        // 3.建立一個路由對象
        var router = new VueRouter({
            // 配置路由對象

            routes:[
                // 動態的路由參數以冒號開頭
                {
                    path: '/timeline',
                    name: 'timeline',
                    component: Timeline,
                    children:[
                        {
                            path: "",
                            component:ComDesc
                        },
                        {
                            path:"/timeline/:id",
                            name:'comDesc',
                            component:ComDesc
                        }
                    ]
                },


                {
                    path: '/pins',
                    name: 'pins',
                    component: Pins
                }
            ]

        });
        var App = {
            template:`
                <div>
                     <router-link to = "/timeline">首頁</router-link>
                     <router-link to = "/pins">沸點</router-link>
                    <!--路由組件的出口-->

                    <router-view></router-view>
                </div>
            `,

        };

        new Vue({
            el:'#app',
            components:{
                App
            },
            router,
            template:`<App />`
        });
    </script>

9 keep-alive在路由中的使用

保持組件以前的狀態node

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/vue-router.js"></script>
<script>
    Vue.use(VueRouter);

    var home = {
        template: `<div>
                我是首頁
        </div>`
    };
    var Pins = {
        template: `
                        <div> <h3 @click='clickHandler'>我是沸點</h3>

                        </div>
                    `,
        created(){
            console.log("沸點組件建立了")
        },
        mounted(){
            console.log("沸點組件DOM加載了")
        },
        destroyed(){
            console.log("沸點銷燬了")
        },
        methods:{
            clickHandler(e){
                e.target.style.color = 'red';
            }
        }

    };


    var router = new VueRouter({
        routes: [
            {
                path: '/home',
                component: home,
            },
            {
                path: "/pins",
                name: "pins",
                component: Pins
            }
        ]
    });
    var App = {
        template: `<div>
                <router-link to="/home">首頁</router-link>
                <router-link to="/pins">沸點</router-link>
                <keep-alive>
                    <router-view></router-view>
                </keep-alive>
        </div>`
    };
    new Vue({
        el: '#app',
        router,
        template: `<App/>`,
        components:{App}
    })
</script>

</body>
</html>

10 權限控制

<body>
    <div id="app"></div>
    <script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
    <!-- 1.引入 vue-router的對象 -->
    <script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
    <!-- 全局的VueRouter對象   vue-router 還給我們提供了兩個全局的組件 router-link  router-view-->
    <script type="text/javascript">


        Vue.use(VueRouter);

        // 導航欄上 有首頁  智能題庫  登陸退出 四個按鈕

        // 用戶訪問首頁時 看到的是首頁的內容

         // 1.當用戶訪問智能題庫時，此時咱們檢測用戶是否有權限訪問該智能題庫的內容，
         // 若是沒有 檢測用戶是否登陸過，若是沒有，則跳轉登陸頁面，登陸完成以後。

         // 在localStroage中通存儲該用戶的用戶名和密碼，而且馬上跳轉到智能題庫頁面
         // 2.當用戶點擊黜退，該用戶直接刪除

        var Home = {

            template:`
                <div>
                    我是首頁
                    <router-view></router-view>
                </div>
            `

        };

        var Questionbank = {

            template:`
                <div>
                    我是題庫
                    <router-view></router-view>
                </div>
            `

        };

        var Login ={

            data(){
                return{
                    name:'',
                    pwd:''
                }
            },
            template:`
               <div>
                   <input type="text" v-model = 'name'/>
                   <input type="text" v-model = 'pwd'/>
                   <input type="submit" value="登陸"  @click = 'loginHandler'/>

               </div>
            `,
            methods:{
                loginHandler(){

                    // 要登陸了
                    // 存儲用戶名和密碼保存到locaStorage 而後跳轉相應的路由
                    localStorage.setItem('user', {name: this.name, pwd: this.pwd});

                    // 編程式導航
                    this.$router.push({name:'questionbank'})
                }
            }
        }



        var router = new VueRouter({
            // 配置路由對象

            routes:[
                // 動態的路由參數以冒號開頭
                {
                    path: '/home',
                    name: 'home',
                    component: Home

                },

                {
                    path: '/questionbank',
                    name: 'questionbank',
                    component: Questionbank,
                    //  給將來的路由作權限控制
                    meta:{
                        // 若是是true代表該組件須要登陸
                        auth:true
                    }
                },
                {
                    path:'/login',
                    component:Login
                }
            ]
        });

        // 全局的導航守衛
        router.beforeEach(function (to, from, next) {
            console.log(to);
            console.log(from);

            if(to.meta.auth){
                // 用戶點擊了智能題庫導航 該用戶未登陸, 須要登陸判斷
                 if(localStorage.getItem('user')){
                     // 不爲空 放行
                     next()
                 }else {
                     // 爲空 進行登陸頁面
                     next({path:'/login'})
                 }

            }else {
                 // 若是不調用next那麼頁面會卡住
                 // 直接放行
                 next();
            }

        });

        var App = {
            template:`
                <div>
                     <router-link to = "/home">首頁</router-link>
                     <router-link to = "/questionbank">智能題庫</router-link>
                     <router-link to = "/login">登陸</router-link>
                     <a href="javascripy:void(0)" @click ='clear'>退出</a>
                    <!--路由組件的出口-->
                    <keep-alive>
                        <router-view></router-view>
                    </keep-alive>
                </div>
            `,
            methods:{
                clear(){
                    // 退出
                    localStorage.removeItem('user');
                    this.$router.push('/log')
                }
            }

        };

        new Vue({
            el:'#app',
            components:{
                App
            },
            router,
            

            template:`<App />`
        });
    </script>
</body>