Vue 路由的配置

時間 2019-11-26

原文原文鏈接

什麼是路由

vue路由是能夠經過組件的形式把全部的組件組裝成爲一個應用程序，當咱們須要的時候，將這個組件映射到路由，而後告訴Vue 咱們在哪裏渲染它們。html

路由是咱們瀏覽器的一個地址。vue

vue路由的優缺點

當咱們加載一個程序時，因爲它加載的內容特別多，因此會比較緩慢，可是咱們加載完以後，咱們到頁面裏進行切換，它的切換速度會變得特別快。緣由是由於咱們將全部的程序都放在一個頁面裏面了，咱們將它加載時全部的功能全部的主鍵都加載到一個頁面去了，因此它加載的速度特別慢，可是加載完以後咱們再進行後續的操做時，它的切換速度和反應速度回特別快。vue-router

路由配置安裝

路由最主要的配置是在於切換和跳轉頁面這兩個方面。瀏覽器

路由配置
動態效果
命名路由
嵌套路由

<!DOCTYPE html>
<html>
  <meta charset="utf-8">
  <title>Vue 路由的配置</title>
<head>
  <meta charset="utf-8">
  <title>Vue 內置指令</title>
  <script src="Vue.min.js"></script>
  <script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router@3.1.2/dist/vue.js"></script>

  <style>
    * {
      padding: 0;
      margin: 0;
    }
    body {
      background: #F4F5F6;
    }
    a {
      text-decoration: none;
      color: #000;
    }
    #main {
      width:980px;
      margin: 0 auto;
      margin-top: 80px;
    }
    #main-left {
      width: 180px;
      float: left;
    }
    #main-left a {
      display: block;
      width: 100%;
      height: 50px;
      line-height: 50px;
      text-align: center;
    }
    #main-right {
      width: 730px;
      float: right;
      background: #fff;
      padding: 20px;
    }
    .active {
      color: #007Aff !important;
    }

  </style>
</head>

<body>
  <div id="main">
    <!-- 導航欄 -->
    <div id="main-left">
      <router-link to="/home" @click.native="changeIndex(1);" :class="{active : index == 1}">網站首頁</router-link>
      <router-link to="/about" @click.native="changeIndex(2);" :class="{active : index == 2}">關於咱們</router-link>
    </div>
    <!-- 對應顯示的內容 -->
    <div id="main-right">
      <router-view></router-view>
    </div>
  </div>

</body>

<script>
  // 定義組件模塊
  const Home = { template: '<div><h1>Vue</h1><p>Vue課程</p></div>' };
  const About = { template: '<div><div><router-link to="/about/ha">關於內容</router-link> | <router-link to="/home/hb">關於課程</router-link></div>' };
  const Ha = { template: '<div><h1>關於內容</h1><p>關於內容........</p></div>'};
  const Hb = { template: '<div><h1>關於課程</h1><p>關於課程........</p></div>'};

  // 定義路由
  const router = new VueRouter({
    routes: [
      { path: '/', redirect: '/home' },
      { path: '/home', component: Home},
      { 
        path: '/about',
        component: About,
        children: [
          {
            path: 'ha',
            component: Ha
          },
          {
            path: 'hb',
            component: Hb
          }
        ]
      },
    ]
  });

  // 建立vue實例並使用路由配置
  var vm = new Vue({
    router,
    data: {
      index: 1
    },
    methods: {
      changeIndex: function(index) {
        this.index = index;
      }
    }
  }).$mount('#main');
</script>
</html>

官方文檔：http://router.vuejs.org/zh-cn/installation.html網站

下載地址：http://unpkg.com/vue-router/dist/vue-router.jsthis