怎样使用Vuejs自定义路由

php中世界最好的语言
Lepaskan: 2018-06-04 14:54:26
asal
1988 orang telah melayarinya

这次给大家带来怎样使用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>
Salin selepas log masuk

然后,将 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><!-- ... -->
Salin selepas log masuk

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

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

定义路由映射:

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

添加 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;)
      );
    },
  },
});
Salin selepas log masuk

实现渲染逻辑,render 函数提供了一个参数 createElement,它是一个生成 VNode 的函数,可以直接将动态引入组件传参给它,执行渲染。

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

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

js基础提升学习之操作DOM对象样式

js基础提升学习之三种内置对象

js基础提升学习之基本数据类型

Atas ialah kandungan terperinci 怎样使用Vuejs自定义路由. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan