首頁  >  文章  >  web前端  >  怎麼使用Vuejs自訂路由

怎麼使用Vuejs自訂路由

php中世界最好的语言
php中世界最好的语言原創
2018-06-04 14:54:261958瀏覽

這次帶給大家怎麼使用Vuejs自定義路由,使用Vuejs自訂路由的注意事項有哪些,下面就是實戰案例,一起來看一下。

我們知道元件可以透過template 來指定模板,對於單一檔案元件,可以透過template 標籤指定模板,除此之外,Vue 還提供了我們一種自訂渲染元件的方式,那就是渲染函數render,具體render 的使用,請閱讀官方文件。

接下來我們開始實作我們的前端路由了。

簡易實作

我們先執行 vue init webpack vue-router-demo 指令來初始化我們的專案(注意初始化的時候,不要選擇使用 vue-router)。

首先,在src 目錄先建立layout/index.vue 文件,用來作為頁面的模板,程式碼如下:

<template>
  <div class="container">
    <ul>
      <li><a :class="{active: $root.currentRoute === &#39;/&#39;}" href="/">Home</a></li>
      <li><a :class="{active: $root.currentRoute === &#39;/hello&#39;}" href="/hello">HelloWord</a></li>
    </ul>
    <slot></slot>
  </div></template><script>export default {  name: &#39;Layout&#39;,
};</script><style scoped>.container {  max-width: 600px;  margin: 0 auto;  padding: 15px 30px;  background: #f9f7f5;
}a.active {  color: #42b983;
}</style>

然後,將components/HelloWorld.vue 移到src/pages ,並修改其程式碼,使用上面創建的頁面模板包裹:

<template>
  <layout>
      <!-- 原模板内容 -->
  </layout></template><script>import Layout from &#39;@/layout&#39;;export default {  name: &#39;HelloWorld&#39;,  components: {
    Layout,
  },  // ...};</script><!-- ... -->

當然還需要添加一個404頁面,用來充當當用戶輸入不存在的路由時的介面。

最後就是我們最重要的步驟了,改寫 main.js,依照頁面 url 動態切換渲染元件。

定義路由映射:

// url -> Vue Componentconst routes = {  &#39;/&#39;: &#39;Home&#39;,  &#39;/hello&#39;: &#39;HelloWorld&#39;,
};

新增 VueComponent 計算屬性,根據 window.location.pathname 來引入所需元件。

const app = new Vue({  el: &#39;#app&#39;,
  data() {    return {      // 当前路由
      currentRoute: window.location.pathname,
    };
  },  computed: {
    ViewComponent() {      const currentView = routes[this.currentRoute];      /* eslint-disable */
      return (
        currentView
          ? require(&#39;./pages/&#39; + currentView + &#39;.vue&#39;)
          : require(&#39;./pages/404.vue&#39;)
      );
    },
  },
});

實作渲染邏輯,render 函數提供了一個參數 createElement,它是一個產生 VNode 的函數,可以直接將動態引入元件傳參給它,執行渲染。

const app = new Vue({  // ...
  render(h) {    // 因为组件是以 es module 的方式引入的,
    // 此处必须使用 this.ViewComponent.default 属性作为参数
    return h(this.ViewComponent.default);
  }
});

我相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

js基礎提升學習操作DOM物件樣式

js基礎提升學習三種內建物件

js基礎提升學習之基本資料型別

以上是怎麼使用Vuejs自訂路由的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn