這次帶給大家怎麼使用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 === '/'}" href="/">Home</a></li> <li><a :class="{active: $root.currentRoute === '/hello'}" href="/hello">HelloWord</a></li> </ul> <slot></slot> </div></template><script>export default { name: 'Layout', };</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 '@/layout';export default { name: 'HelloWorld', components: { Layout, }, // ...};</script><!-- ... -->
當然還需要添加一個404頁面,用來充當當用戶輸入不存在的路由時的介面。
最後就是我們最重要的步驟了,改寫 main.js,依照頁面 url 動態切換渲染元件。
定義路由映射:
// url -> Vue Componentconst routes = { '/': 'Home', '/hello': 'HelloWorld', };
新增 VueComponent 計算屬性,根據 window.location.pathname 來引入所需元件。
const app = new Vue({ el: '#app', data() { return { // 当前路由 currentRoute: window.location.pathname, }; }, computed: { ViewComponent() { const currentView = routes[this.currentRoute]; /* eslint-disable */ return ( currentView ? require('./pages/' + currentView + '.vue') : require('./pages/404.vue') ); }, }, });
實作渲染邏輯,render 函數提供了一個參數 createElement,它是一個產生 VNode 的函數,可以直接將動態引入元件傳參給它,執行渲染。
const app = new Vue({ // ... render(h) { // 因为组件是以 es module 的方式引入的, // 此处必须使用 this.ViewComponent.default 属性作为参数 return h(this.ViewComponent.default); } });
我相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
以上是怎麼使用Vuejs自訂路由的詳細內容。更多資訊請關注PHP中文網其他相關文章!