路由vue-router

1）是vue的一個核心插件

2）可以根據(jù)不同的url訪問不同的頁面（進行不同頁面的跳轉(zhuǎn)）

3）創(chuàng)建單頁面應用[又叫做SPA（SINGLE PAGE APP LICATION）應用]

簡單路由

<div class="box">
            <router-link to="/home">首頁</router-link>
            <router-link to="/bag">用戶頁</router-link>
            <router-view></router-view>
        </div>
        <script type="text/javascript" src="js/vue.js" ></script>
        <script type="text/javascript" src="js/vue-router.js" ></script>
        <script>
            var Home={
                template:`
                    <h1>歡迎來到我的網(wǎng)站</h1>
                `
            }
            var Bag={
                template:`
                    <h1>進入用戶頁面</h1>
                `
            }
            const routes=[
                {path:"/",compontent:Home},
                {path:"/home",component:Home},
                {path:"/bag",component:Bag}
            ]
            const router=new VueRouter({
                routes:routes
            })
            
            new Vue({
                el:".box",
                router:router
            })
        </script>

當點擊是字體點顏色

``css
               <style>
            /*.active{
                color:orange;
            }*/
            .router-link-active{
                color: orange;
            }
        </style>
``html
               <div class="box">
            <router-link to="/home">首頁</router-link>
            <router-link to="/bag">用戶頁</router-link>
            <router-view></router-view>
        </div>
``js
                <script type="text/javascript" src="js/vue.js" ></script>
        <script type="text/javascript" src="js/vue-router.js" ></script>
        <script>
            var Home={
                template:`
                    <h1>歡迎來到我的網(wǎng)站</h1>
                `
            }
            var Bag={
                template:`
                    <h1>進入用戶頁面</h1>
                `
            }
            const routes=[
                {path:"/",compontent:Home},
                {path:"/home",component:Home},
                {path:"/bag",component:Bag}
            ]
            const router=new VueRouter({
                routes:routes,
                /*linkActiveClass:"active"*/
            })
            
            new Vue({
                el:".box",
                router:router
            })
        </script>

路由的嵌套

<div class="box">
            <router-link to="/home">首頁</router-link>
            <router-link to="/bag">用戶頁</router-link>
            <router-view></router-view>
            
        </div>
        <script type="text/javascript" src="js/vue.js" ></script>
        <script type="text/javascript" src="js/vue-router.js" ></script>
        <script>
            var home={
                template:`
                    <h1>歡迎來到我的網(wǎng)站</h1>
                `
            }
            var bag={
                template:`
                   <div>
                        <h1>歡迎來到我的用戶頁</h1>
                        <ul>
                            <li>
                                <router-link to="/bag/zhu">注冊</router-link>
                            </li>
                            <li>
                                <router-link to="/bag/deng">登錄</router-link>
                            </li>
                        </ul>
                        <router-view></router-view>
                    </div> 
                `
            }
            var zhu={
                template:`
                    <h1>歡迎來到我的注冊</h1>
                `
            }
            var deng={
                template:`
                    <h1>歡迎來到我的登錄</h1>
                `
            }
            const routes=[
                {path:'/',component:home},
                {path:"/home",component:home},
                {
                    path:"/bag",
                    component:bag,
                    children:[
                        {path:"zhu",component:zhu},
                        {path:"deng",component:deng}
                    ]
                }
            ]
            const router=new VueRouter({
                routes:routes
            })
            new Vue({
                el:".box",
                router:router
            })
        </script>

不常用的五個標簽

v-html 可以識別標簽
v-text 不識別標簽按文本輸入
v-once 只綁定第一次
v-pre 原樣輸出不對數(shù)據(jù)進行解譯
v-clock 數(shù)據(jù)沒有完全加載之前 加載完v-clock就消失了

<div class="box">
            <input type="text" v-model="msg" />
            <p v-html="msg">{{msg}}</p>
            <h2 v-text="msg">{{msg}}</h2>
            <h4 v-once>{{msg}}</h4>
            <h6 v-pre>{{msg}}</h6>
            <h5 v-cloak>{{msg}}</h5>
        </div>
        <script type="text/javascript" src="js/vue.js" ></script>
        <script>
            new Vue({
                el:".box",
                data:{
                    msg:'hello'
                },
                beforeMount:function(){ 
                  alert('beforeMount')
                }
            })
        </script>