Vue.js 路由

最新推荐文章于 2022-07-27 10:11:35 发布

转载最新推荐文章于 2022-07-27 10:11:35 发布 · 628 阅读

文章标签：

#Vue.js #路由

Vue.js 专栏收录该内容

49 篇文章

订阅专栏

本文介绍如何在Vue.js中实现简单路由，无需引入完整路由库。通过动态渲染组件和利用HTML5 History API，构建基本的客户端路由器。同时，提供整合第三方路由库的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

官方路由

对于大多数单页面应用，都推荐使用官方支持的 vue-router 库。更多细节可以看 vue-router 文档。

从零开始简单的路由

如果只需要非常简单的路由而不需要引入整个路由库，可以动态渲染一个页面级的组件像这样：

const NotFound = { template: '<p>Page not found</p>' }
const Home = { template: '<p>home page</p>' }
const About = { template: '<p>about page</p>' }

const routes = {
  '/': Home,
  '/about': About
}

new Vue({
  el: '#app',
  data: {
    currentRoute: window.location.pathname
  },
  computed: {
    ViewComponent () {
      return routes[this.currentRoute] || NotFound
    }
  },
  render (h) { return h(this.ViewComponent) }
})

结合 HTML5 History API，你可以建立一个非常基本但功能齐全的客户端路由器。可以直接看实例应用