怎样使用Vuejs自定义路由

php中世界最好的语言

发布时间：2018-06-04 14:54:26

2165人浏览过

来源于php中文网

原创

这次给大家带来怎样使用vuejs自定义路由，使用vuejs自定义路由的注意事项有哪些，下面就是实战案例，一起来看一下。

我们知道组件可以通过 template 来指定模板，对于单文件组件，可以通过 template 标签指定模板，除此之外，Vue 还提供了我们一种自定义渲染组件的方式，那就是渲染函数 render，具体 render 的使用，请阅读官方文档。

接下来我们开始实现我们的前端路由了。

简易实现

我们先运行 vue init webpack vue-router-demo 命令来初始化我们的项目（注意初始化的时候，不要选择使用 vue-router）。

立即学习“前端免费学习笔记（深入）”；

首先，在 src 目录先创建 layout/index.vue 文件，用来作为页面的模板，代码如下：

然后，将 components/HelloWorld.vue 移动到 src/pages，并修改其代码，使用上面创建的页面模板包裹：

当然还需要添加一个 404页面，用来充当当用户输入不存在的路由时的界面。

最后就是我们最重要的步骤了，改写 main.js，根据页面 url 动态切换渲染组件。

方舟订单管理系统

系统开发由二当家的编写，代码完全开源，可自行修改源码，欢迎使用！ 1、网站采用php语言开发，更安全、稳定、无漏洞、防注入、防丢单。 2、记录订单来路，客户IP记录及分析，订单数据统计 3、订单邮件提醒、手机短信提醒，让您第一时间追踪订单，大大提升了发货效率，提高订单成交率。 4、多种支付方式，包含：货到付款、支付宝接口、网银支付，可设置在线支付的折扣比率。 5、模板样式多样化，一个订单放到多个网

下载

定义路由映射：

// 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中文网其它相关文章！