Vue基础（二）

2018年12月16日21:24:39

10.Mixins

别问我为啥没中文有道没翻译出来
组件中很容易遇到需要使用相同的函数与属性，为了重用使用Mixins将重复的内容封装

var base = {
  data: function () {
    return {
      visible: false,
    }
  },
  methods: {
    show: function () {
      this.visible = true;
    },
    hide: function () {
      this.visible = false;
    }
  }
}
Vue.component("name", {
  mixins:[base],
......
});
Vue.component("beeeeee", {
......
  mixins:[base],
});

11.插槽slot

slot插槽可以在组件中自定义的添加数据和默认数据

    
      
震惊！王小明居然……
      
居然是dcd
      
更多傻逼新闻
    
    
   

12.Vue-Router路由

12.1路由基础

创建一个路由对象数组，每个对象分别有，path，component等属性，在component中定义对应的模板。在视图上需要使用如下两组标签来完成渲染

首页
视图
关于我们


-------------------------------------------------------------------------
var routes=[
    {path:'/',component:{template:`
Hello!Welcome to Home!
`}},
    {path:'/views',component:{template:`
visited this list!
`}},
    {path:'/about',component:{template:`
about this web!
`}},
];
var router=new VueRouter({
  routes:routes,
});
var app=new Vue({
  el:"#app",
  router:router,
});

12.2路由的参数

其实叫动态路由更好吧。。
在path中使用/path/:name的方式接收参数，存储在$route.params中，同时可以使用？的方式传递url数据，参数存储在$route.query中

{path:'/user/:name?',component:{template:`
hello!{{$route.params.name}}{{$route.query.age}}
`}},

12.3子路由

在路由中定义一个children数组存放一个子路由对象，然后在父级路由的模板中需要加入路由渲染的两个标签，如下图

{path:'/user/:name?',component:{template:`
    

      
hello!{{$route.params.name}}{{$route.query.age}}
      显示更多      
      显示更多
      
    
`},
    children:[
      {
        path:'more',
        component:{
          template:`
{{$route.params.name}}的详细信息
`
        }
      }
    ]
},

12.4手动给路由传递参数（push）

在函数中使用路由的push函数可以指定跳转到对应的路由路径上

//参数是路由路径
router.push("/user/张三蛋蛋");
//参数是路由name属性以及要传递的参数对象
router.push({name:'home',params:{param:"world!"}})；

12.5路由视图

可能存在一个router-view不便于渲染的情况，因此需要对路由视图命名并重新定义渲染内容
该部分在路由配置的数组对象中完成，对于视图的定义要写在components中

var routes=[
  {
    path:'/',
    component:{
      template:`
首页
`
    },
    components:{
      view1:{
        template:`
首页标题
`
      },
      view2:{
        template:`
首页副标题
`
      }
    }
  },
];

13.导航钩子

有时候我们并不希望所有路由都直接被渲染，此时我们调用beforeEach函数对路由进行拦截（自个儿起的名字），当不符合条件时我们使用next将路由导向其它的路径。

router.beforeEach(function(to,from,next){
    var login_in=false;
    if(!login_in && to.path=='/admin'){
      next('/login');
    }
    else{
      next();
    }
});

14.路由匹配

在13操作之后我们发现，虽然/admin被拦截了，但/admin/...却依然可以通行，因此我们需要对路由进行更深一步的拦截，在beforeEach函数的参数to中有一个matched属性存储了被访问路由的所有父级路由，因此我们可以便利它，如果找到/admin那么证明当前路由路径是/admin的子路由路径

router.beforeEach(function (to, from, next) {
    var login_state = false;
    if (!login_state && to.matched.some(function (item) {
      return item.path=='/admin';
    }
  )) {
      next("/login");
    } else
  next();
});

另外还有一种方法是在需要拦截的根目录上自定义一个参数，然后在遍历时我们直接返回该参数，如果能得到该参数则证明当前访问路径一定是拦截目录的子路径（妈耶说的我都晕了）

添加的属性

router.beforeEach(function (to, from, next) {
  var login_state = false;
  if (!login_state && to.matched.some(function (item) {
    return item.meta.login_require;
   }
  )) {
      next("/login");
    } else
      next();
  });

笔记先写到这儿吧，可能还得找个例子写了才能完全吸收，目前对于一些东西依然不是很明白到底应该怎么做，比如前后端模块等。如果能找一个vue+node+MongoDB的项目做一下应该就差不多了。困了，洗洗睡了。