1. router-link

<router-link> 默認(rèn)會(huì)被渲染成一個(gè) <a> 標(biāo)簽，通過(guò)傳入 to 屬性指定鏈接。

<router-link to="/home">首頁(yè)</router-link>

2.router-view

路由匹配到的組件會(huì)渲染到router-view 中。

<div id="app">
  <p>
    <router-link to="/home">首頁(yè)</router-link>
    <router-link to="/category">分類</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的組件將渲染在這里 -->
  <router-view></router-view>
</div>

3. 路由js文件的配置

(1).如果使用模塊化機(jī)制編程，導(dǎo)入Vue和VueRouter，要調(diào)用 Vue.use(VueRouter)。

//router/ index.js

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

(2).使用import 導(dǎo)入路由組件。

import Home from 'pages/home';
import Category from 'pages/category';

(3).定義路由。

• name 路由名稱，并且<router-link>中的to屬性也可以使用name匹配路由。
• path 路徑，也與<router-link>中的to屬性進(jìn)行匹配（常用的匹配方式）。
• component 組件，與(2)中導(dǎo)入路由組件的名稱一致。

const routes = [
  {
    name:'home',
    path:'/home',
    component: Home
  },
  {
    name: 'category',
    path: '/category',
    component: Category
  }
]

(4).創(chuàng)建 router 實(shí)例，然后傳 routes 配置，并把實(shí)例導(dǎo)出。（即（3）中的配置）

export default new Router({
  routes // (縮寫(xiě)) 相當(dāng)于 routes: routes
});

(5). 使用vue-cli搭建的項(xiàng)目，有一個(gè)入口文件main.js 。在里面導(dǎo)入路由js文件，并掛載到vue實(shí)例中，這樣整個(gè)項(xiàng)目都可以使用路由了。

import router from './router';

new Vue({
  router
});

(6). 最后在任何組件內(nèi)通過(guò) this.$router訪問(wèn)路由器，也可以通過(guò) this.$route 訪問(wèn)當(dāng)前路由。
(7). 當(dāng) <router-link> 對(duì)應(yīng)的路由匹配成功，將自動(dòng)設(shè)置 class 屬性值.router-link-active。
例如點(diǎn)擊首頁(yè)的時(shí)候，如下第一個(gè)路由會(huì)設(shè)置.router-link-active類名。

 <p>
    <router-link to="/home">首頁(yè)</router-link>
    <router-link to="/category">分類</router-link>
  </p>