一、導入包

注意：導入的包要在vue下邊

  <title>基本路由的使用</title>
  <script src="./lib/vue-2.4.0.js"></script>
  <script src="./lib/vue-router-3.0.1.js"></script>

二却特、創(chuàng)建子組件

注意：是在vm實例上邊創(chuàng)建

    var login = {
        template: '<h3>這是登錄子組件芒率，這個組件是 奔波霸 開發(fā)的锭部。</h3>'
    }
    var register = {
        template: '<h3>這是注冊子組件暂论，這個組件是 霸波奔 開發(fā)的。</h3>'
    }

三拌禾、創(chuàng)建一個路由對象

創(chuàng)建路由對象取胎，當導入包之后，在window全局對象中有路由構造函數(shù)--VueRouter湃窍，在new路由對象時扼菠，可以為構造函數(shù)傳遞一個配置對象摄杂。

    var router = new VueRouter({
        routes: [ //路由規(guī)則數(shù)組
            {path: '/login', component: login},
            {path: '/register', component: register}
        ]
    })

四柑船、創(chuàng)建 Vue 實例，得到 ViewModel

將路由規(guī)則對象注冊到vm實例上泼各，用來監(jiān)聽url地址變化鞍时，并展示相應的組件
法一：

    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      router
    });

法二：

    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      router: router
    });

五、在頁面中導入容器

由VueRouter提供的元素扣蜻，用來做占位符逆巍，由路由規(guī)則匹配到的組件來展示。

  <div id="app">
        <router-link to="/login">登錄</router-link>
        <router-link to="/register">注冊</router-link>

        <router-view></router-view>
  </div>

注意：router-link默認類似于a標簽

類似a標簽

可以利用tag來修改

  <div id="app">
        <router-link to="/login" tag="span">登錄</router-link>
        <router-link to="/register">注冊</router-link>

        <router-view></router-view>
  </div>

修改為span

最終頁面結果：

image.png

六莽使、重定向設置初識打開的頁面

   var router = new VueRouter({
        routes: [ //路由規(guī)則數(shù)組
            {path: '/',redirect:'/login'},
            {path: '/login', component: login},
            {path: '/register', component: register}
        ],
      // linkActiveClass: 'myactive' // 和激活相關的類
    })

結果：
打開頁面就是我們設置的login锐极，包括導航欄地址

結果

七、給路由設置樣式

    var router = new VueRouter({
        routes: [ //路由規(guī)則數(shù)組
            {path: '/',redirect:'/login'},
            {path: '/login', component: login},
            {path: '/register', component: register}
        ],
       linkActiveClass: 'myactive' // 和激活相關的類
    })

      .router-link-active,
      .myactive {
      color: red;
      font-weight: 800;
      font-style: italic;
      font-size: 80px;
      text-decoration: underline;
      background-color: green;
    }

結果如下：

設置樣式