1.簡單實(shí)例

vue的核心插件，可創(chuàng)建單頁面應(yīng)用又叫SPA（SIWGLE PAGE APPLICATIDN）應(yīng)用
Vue.js + vue-router 可以很簡單的實(shí)現(xiàn)單頁應(yīng)用。
<router-link> 是一個組件，該組件用于設(shè)置一個導(dǎo)航鏈接，切換不同 HTML 內(nèi)容。 to 屬性為目標(biāo)地址， 即要顯示的內(nèi)容。
以下實(shí)例中我們將 vue-router 加進(jìn)來，然后配置組件和路由映射，再告訴 vue-router 在哪里渲染它們。代碼如下所示：
引入vue-router.js是要在vue.js下方引入（順序不能更改，否則會失效沒有用）

 <div id='app'>
     <!--1.-->
     <router-link to='/index'>首頁</router-link>
     <router-link to='/client'>用戶頁</router-link> 
     
    <!-- 盛放鏈接對應(yīng)的內(nèi)容-->
      <router-view></router-view>
  </div>
   <script src='js/vue.js'></script> 
   <script src='js/vue-router.js'></script>

   <script>
       //2.創(chuàng)建組件(用var創(chuàng)建一個名字為Home的組件，Home為組件名)
       var Home={
           template:`
             <h1>這是首頁</h1>
           `
       }
       var User={
           template:`
                <h1>這是客戶頁</h1>
            `
       }
       //3.配置路由，（path寫的是路徑）
       const  routes=[
           {path:'/index',component:Home},
           {path:'/client',component:User}
       ]
       //4.創(chuàng)建路由實(shí)例
       const router=new VueRouter({
           routes:routes
       })
       //5.路由實(shí)例掛載到vue實(shí)例上,也叫注冊路由
       new Vue({
           el:'#app',
           router:router
       })
    </script>

2路由的嵌套

<div id="app">
            <router-link to='/home'>首頁</router-link>
            <router-link to='/index'>主頁</router-link>
            <router-view></router-view>
        </div>
            <script src="js/vue.js"></script>
            <script src="js/vue-router.js"></script>
            <script>
                var Home={
                    template:`
                        <h1>我是首頁~!!!!</h1>
                    `
                }
                var Index={
                    template:`
                    <div>
                        <h1>我是主頁~!!!!</h1>
                        <ul>
                           <li>
                              <router-link to='/index/denglu'>登錄</router-link>
                           </li>
                           <li>
                              <router-link to='/index/zhuce'>注冊</router-link>
                           </li>
                        </ul>
                        <router-view></router-view>
                    </div>
                }
                var Denglu={
                    template:`<h3>這是登錄頁面</h3>`
                }
                var Zhuce={
                    template:`<h3>這是注冊頁面</h3>`
                }
                const routers = [
                  {path:'/',component:Home},
                  {path:'/home',component:Home},
                  {
                    path:'/index',
                    component:Index,
                    children:[
                          {path:'denglu',component:Denglu},
                          {path:'zhuce',component:Zhuce}
                  ]}
                ]
                const router = new VueRouter({
                    routes:routers
                })
                new Vue({
                    el:'#app',
                    router:router
                })
            </script>

注意：routes:routers中間是冒號

不常用的五個標(biāo)簽

v-html 可以識別標(biāo)簽
v-text 不識別標(biāo)簽按文本輸入
v-once 只綁定第一次
v-pre 原樣輸出不對數(shù)據(jù)進(jìn)行解譯
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>