2018-09-24路由及路由嵌套

1.简单实例

vue的核心插件，可创建单页面应用又叫SPA（SIWGLE PAGE APPLICATIDN）应用
Vue.js + vue-router 可以很简单的实现单页应用。
<router-link> 是一个组件，该组件用于设置一个导航链接，切换不同 HTML 内容。 to 属性为目标地址， 即要显示的内容。
以下实例中我们将 vue-router 加进来，然后配置组件和路由映射，再告诉 vue-router 在哪里渲染它们。代码如下所示：
引入vue-router.js是要在vue.js下方引入（顺序不能更改，否则会失效没有用）

 <div id='app'>
     <!--1.-->
     <router-link to='/index'>首页</router-link>
     <router-link to='/client'>用户页</router-link> 
     
    <!-- 盛放链接对应的内容-->
      <router-view></router-view>
  </div>
   <script src='js/vue.js'></script> 
   <script src='js/vue-router.js'></script>

   <script>
       //2.创建组件(用var创建一个名字为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.创建路由实例
       const router=new VueRouter({
           routes:routes
       })
       //5.路由实例挂载到vue实例上,也叫注册路由
       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中间是冒号

不常用的五个标签

v-html 可以识别标签
v-text 不识别标签按文本输入
v-once 只绑定第一次
v-pre 原样输出不对数据进行解译
v-clock 数据没有完全加载之前 加载完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>