vue学习笔记--2

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

1、编程式导航

    编程式导航其实就是用javascript来实现页面之间的跳转

（1）跳转位置

（2）跳转实现

（3）跳转方式

1）方式一

this.$router.push({path:'news'});
//传值。变成 /news? aid =343  在news页面使用get方式获取aid
this.$router.push({ path: 'news', query: { aid: '343' }})

2）方式二

this.$router.push({ name: 'news', params: { aid: 123 }});

    在编程式路由中name和path不可同时存在

2、路由的 history 模式

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

const router = new VueRouter({  mode: 'history',  routes: [...]})

    当你使用 history 模式时，URL 就像正常的 url例 yoursite.com/user/id，也好看… oursite.com/user/id 就会返回 404，这就不好看了。

所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。

    这一部分后面用到了再详细记录。

3、css:Flex布局

    学习地址：blog.csdn.net/Allenyhy/ar…

4、路由的嵌套（父子路由）

（1）配置路由（children）

 {     
     path: '/user',  
     component: User ,   
     children:[     
         { path: 'useradd', component: UserAdd },      
         { path: 'userlist', component: UserList },  
     ]  
 },

（2）父路由里配置子路由显示的地方\

<template>  
    <div>         
    我是用户组件              
    <div class="user">          
        <div class='left'>              
            <ul>                    
                <li>                       
                    <router-link to='/user/useradd'> 增加用户</router-link>                 </li>
                <li>                       
                    <router-link to='/user/userlist'> 用户列表</router-link>                  </li>                
              </ul>           
           </div>
           <div class='right'>         
             <router-view></router-view>      
           </div>       
         </div>    
      </div>
</template>