2018-05-31（表严肃）笔记四

一、路由

不需要每次更新页面都重新取一次数据，只需要取一次。

1. 配置
   出现错误：将vue-router文件放在了js主文件的后面。调整过来错误消失。

var routes = [
    {
        path:'/',
         component: {
            template:`
            <div>
            <h1>首页</h1>
            </div>
            `,
        },
    },
    {
        path:'/about',
         component: {
            template:
            `
            <div>
            <h1>关于我们</h1>
            </div>
            `,
        },
    },
    ];
     var router = new VueRouter({
          routes: routes,
        });
    new Vue({
        el:'#seg1',
        router:router,
    });

2. 传参

{
    path: '/user/:name',
    component: {
      template: `
      <div>
        <h1>我叫{{$route.params.name}}</h1>
        // 通过url里面的一部分
        <h1>我{{$route.query.age}}岁了</h1>
        // 通过URL中加？age=年龄来传参
      </div>
      `,
    },
  },

3. 子路由
   加载路由页面的里面，component后面

{
        path: '/user/:name',
        component: {
          template: `
          <div>
            <h1>我叫{{$route.params.name}}</h1>
            <h1>我{{$route.query.age}}岁了</h1>
           <router-link :to="'/user/' + $route.params.name +'/more'">更多信息</router-link>
            <router-view></router-view>
          </div>
          `,
        },
         // <router-link to="more" append>更多信息</router-link>
        // <router-link :to="'/user' + $route.params.name +'/more'">更多信息</router-link>
        children:[
       {
        path: 'more',
        component: {
          template: `
          <div>
            用户{{$route.params.name}}的详细信息
            傻傻傻
          </div>
          `,
        },
      },
    ],
   },

4. 手动访问和传参
   一个点击方法：

        methods:{
          get:function () {
            setTimeout(function(){
              this.router.push('/about');
              setTimeout(function(){
                this.router.push({name:'user',params:{name:'王花花'}});
              },2000)
            },2000)
          }
        }

4. 命名视图
   页面中的命名视图最好只有两个，多了不好维护

   <div>
       <router-link to="/">首页</router-link>
       <router-link to="/user">用户管理</router-link>
   </div>
   <div>
     <router-view name="sidebar"></router-view>
     <router-view name="content"></router-view>
   </div>

 {
        path: '/user',
        components: {
          sidebar:{
            template: `
          <div>
            <ul>
             <li>用户列表</li>
             <li>权限管理</li>
            </ul>
          </div>
          `,
          },
          content:{
           template: `
          <div>
            用户管理
          </div>
          `,
          }
        },
   },

5. 导航钩子
   检查路由：
   beforeEach：将登陆值设置为false，
   如果已经登陆，就正常跳转，如果没有就跳转到登陆页。
   afterEach：判断一些信息

    router.beforeEach(function (to,from,next) {
     var logged = false;
     if(!logged && to.path == '/post')
      next('/login');
    else 
     next();
    });
    router.afterEach(function (to,from) {
   //判断前一页下一页
    });
```-