0
点赞
收藏
分享

微信扫一扫

记一次vue的小问题

成义随笔 2022-04-14 阅读 65
vue.jsvue

刚刚开始学vue,在进行vue的路由设置中出现了以下问题:

我的自定义组件如下:

<template>
  <h1>首页</h1>
</template>

<script>
    export default {
        name: "main"
    }
</script>

<style scoped>

</style>

路由配置如下:

//路由配置

//导入vue
import Vue from 'vue'
//导入router路由
import VueRouter from 'vue-router'

//导入组件所需组件
import Main from '../components/main'
//使用路由
Vue.use(VueRouter);

//配置导出路由
export default new VueRouter({
    routes: [
      {
        //路由名字:可要可不要
        name:'Main',
        //路由路径,点击此路径跳转到相应组件
        path: '/main',
        //绑定组件,就是上面所导入的组件
        components: Main
      }

    ]

  }
);

主vue组件(运行后展示的vue组件):

<template>
  <div id="app">
   <h1>Vue-Router</h1>
    <router-link to="/main">首页</router-link>
    <router-view></router-view>

  </div>
</template>

运行后展示页面:

点击首页会显示最上面图的问题,经过排查,发现是路由router配置里的component误写成了components,导致无法加载。

 

 

举报

相关推荐

0 条评论