时间:2021-07-01 10:21:17 帮助过:17人阅读
我们知道组件可以通过 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); } });
相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!
推荐阅读:
js基础提升学习之操作DOM对象样式
js基础提升学习之三种内置对象
js基础提升学习之基本数据类型
以上就是怎样使用Vuejs自定义路由的详细内容,更多请关注Gxl网其它相关文章!