vue-router—1什么是路由以及使用步骤

最新推荐文章于 2025-07-31 12:18:09 发布

原创最新推荐文章于 2025-07-31 12:18:09 发布 · 254 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

vue-router

当前文章被收录于：

vue-router

18 篇文章 1 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文详细介绍了如何在Vue.js项目中设置和使用VueRouter插件，包括导入Vue和VueRouter，将VueRouter作为插件注册到Vue实例，以及定义基本的路由规则。通过一个具体的例子，展示了如何创建一个包含主页的简单路由结构。

现在开始实操

main.js

import Vue from 'vue'
import VueRouter from "vue-router";


// 作为vue的插件
Vue.use(VueRouter)

import App from "./App";
import home from "@/components/home";

var router = new VueRouter({
  routes: [
    {
      path: '/',
      component: home
    }
  ]
})

new Vue({
  el: "#app",
  router,
  template: '<App />',
  components: {
    App
  }

})