刚创建的vue2项目路由是空白页的原因

最新推荐文章于 2024-04-29 04:19:57 发布

原创最新推荐文章于 2024-04-29 04:19:57 发布 · 1.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #elementui

本文详细介绍了如何在Vue应用中使用Vue Router创建路由，包括配置默认路径、定义组件、设置挂载点，并在main.js中完成全局路由的导入和挂载。

1、创建路由

router/index.js

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

Vue.use(VueRouter);
const routers = [
  {
    path: "/",
    redirect: "/home",
  }, //设置默认指向的路径

  {
    path: "/home",
  
    component: () => import('../pages/home.vue')
  },
  
  {
    path: "/index",
  
    component: () => import('../pages/index.vue')
  },
];

const router = new VueRouter({
//注意 ：这个 routes不能写错，就是写错这个所以 页面一直没有显示出来


  routes: routers,
});

// 导出路由
export default router;

2、在app.vue中设置路由挂载点

<template>
  <div>
    <!-- 路由挂载点 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

3、在main.js中挂载路由

import Vue from 'vue'
import App from './App.vue'
import router from "./router/index"
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router:router
}).$mount('#app')