<router-link></router-link>被選中時(shí)樣式的修改：

.router-link-active{
    
}

exact的妙用：

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

在這里面我們通過(guò)name來(lái)跳轉(zhuǎn)（也可以通過(guò):to={path:'/'}來(lái)跳轉(zhuǎn)）瞧甩，在路由里面Home和About的path分別為/和/about肚逸，那么當(dāng)我們點(diǎn)擊About的時(shí)候我們的本意是只匹配/about路徑，但是實(shí)際上此時(shí)/和/about都會(huì)被匹配到朦促，此時(shí)兩個(gè)<router-link>中的class都會(huì)被添加上router-link-active，所以此時(shí)我們就不得不用精確匹配血当，一般習(xí)慣在路徑是' / '的那個(gè)<router-link>中添加臊旭，得到：

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

插件擴(kuò)展：

首先我們要在src目錄下建立一個(gè)plugins的文件夾箩退，來(lái)存放我們自己寫(xiě)的插件，在這里我就拿fetch插件來(lái)舉個(gè)例子：

/plugins/fetch.js:
let baseUrl;

export async function $fetch (url, options) {
  // credentials: 'include' 解決跨域問(wèn)題
  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;
  }
}

//下面的是重點(diǎn)，一定要用install(Vue, options){}啥刻，這是規(guī)定！主要看這個(gè)里面的娄涩，上面的$fetch只是一個(gè)簡(jiǎn)簡(jiǎn)單單單的方法
export default {
  install(Vue, options) {
    // console.log('Installed!', options);

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

//現(xiàn)在來(lái)到main.js中：
import VueFetch from './plugins/fetch'

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

//開(kāi)始使用,此時(shí)請(qǐng)求的鏈接就是http://localhost:3000/items
this.$fetch('items')

路由守衛(wèi)：

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的下面一定要加一個(gè)return钝满，否則這里的next執(zhí)行完就會(huì)出if然后執(zhí)行下面的     //那個(gè)next
    next({
      name: 'login',
      params: {
        wantedRoute: to.fullPath,
      },
    });
    return ;
  }
  next();
}))

在這里我們的路由沒(méi)有嵌套，所以to.meta.private可以輕松取到guest的值孔轴，但是當(dāng)我們的路由是嵌套的時(shí)路鹰，當(dāng)訪問(wèn)children中的組件是我們的to就取不到外層的meta了，那怎么辦呢优构？

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

如上如果我們?cè)L問(wèn)/tickets钦椭，就訪問(wèn)不到children外的meta了，針對(duì)這個(gè)問(wèn)題Vue.js給了我們matched解決方案侥锦，在這里推薦一直用這個(gè)就好了德挣，不管是嵌套路由還是不嵌套的路由９Э选！

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