Vue.js笔记（一）

<router-link></router-link>被选中时样式的修改：

.router-link-active{
    
}

exact的妙用：

<router-link :to={name: 'home'}>Home</router-link>
<router-link :to={name: 'about'}>About</router-link>

在这里面我们通过name来跳转（也可以通过:to={path:'/'}来跳转），在路由里面Home和About的path分别为/和/about，那么当我们点击About的时候我们的本意是只匹配/about路径，但是实际上此时/和/about都会被匹配到，此时两个<router-link>中的class都会被添加上router-link-active，所以此时我们就不得不用精确匹配，一般习惯在路径是' / '的那个<router-link>中添加，得到：

<router-link :to={name: 'home'} exact>Home</router-link>
<router-link :to={name: 'about'}>About</router-link>

插件扩展：

首先我们要在src目录下建立一个plugins的文件夹，来存放我们自己写的插件，在这里我就拿fetch插件来举个例子：

/plugins/fetch.js:
let baseUrl;

export async function $fetch (url, options) {
  // credentials: 'include' 解决跨域问题
  const finalOptions = Object.assign({}, {
    headers: {
      'Content-Type': 'application/json',
    },
    credentials: 'include',
  }, options)
  const response = await fetch(`${baseUrl}${url}`, finalOptions);
  if (response.ok) {
    const data = await response.json();
    return data;
  } else {
    const message = await response.text();
    const error = new Error(message);
    error.response = response;
    return error;
  }
}

//下面的是重点，一定要用install(Vue, options){}，这是规定！主要看这个里面的，上面的$fetch只是一个简简单单单的方法
export default {
  install(Vue, options) {
    // console.log('Installed!', options);

    baseUrl = options.baseUrl;
    Vue.prototype.$fetch = $fetch;
  }
}

//现在来到main.js中：
import VueFetch from './plugins/fetch'

Vue.use(VueFetch, {
  //这个baseUrl在查建中用options.baseUrl即可取到
  baseUrl: 'http://localhost:3000/',
})

//开始使用,此时请求的链接就是http://localhost:3000/items
this.$fetch('items')

路由守卫：

src/router/index.js

{
   path: '/login',
   name: 'login',
   component: Login,
   meta: {
     guest: true
   }
 },
     
router.beforeEach(((to, from, next) => {
  console.log('to', to.name);
  if (to.meta.private && !state.user) {
    //注意：在这种情况下next的下面一定要加一个return，否则这里的next执行完就会出if然后执行下面的     //那个next
    next({
      name: 'login',
      params: {
        wantedRoute: to.fullPath,
      },
    });
    return ;
  }
  next();
}))

在这里我们的路由没有嵌套，所以to.meta.private可以轻松取到guest的值，但是当我们的路由是嵌套的时，当访问children中的组件是我们的to就取不到外层的meta了，那怎么办呢？

{
  path: '/tickets',
  component: TicketsLayout,
  meta: {
    private: true,
  },
  children: [
    {
      path: '',
      name: 'tickets',
      component: Tickets
    },
  ]
},

如上如果我们访问/tickets，就访问不到children外的meta了，针对这个问题Vue.js给了我们matched解决方案，在这里推荐一直用这个就好了，不管是嵌套路由还是不嵌套的路由！！

  if (to.matched.some(r => r.meta.private) && !state.user) {
    next({
      name: 'login',
      params: {
        wantedRoute: to.fullPath,
      },
    });
    return ;
  }