时间戳

首页 > 解决方案 > 空白页，vue.js 中没有错误

vue.js - 空白页，vue.js 中没有错误

问题描述

我是初学者。我正在尝试学习 vue js 。当我尝试运行 /anything 之类的任何页面时，它会重定向到 index.html 页面。我无法找出错误。请帮我。任何帮助将不胜感激。

注册.vue


<template>
  <v-form>
    <v-container>
      <v-row>

        <v-col cols="12" sm="6">
          <v-text-field
            label="Username"
            required
          ></v-text-field>
        </v-col>

     <v-col cols="12" sm="6">
        <v-text-field
                  label="Password"
            type="password"
          ></v-text-field>
        </v-col>

      </v-row>
    </v-container>
  </v-form>
</template>

main.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'

Vue.config.productionTip = false
const routes = [];

const router = new VueRouter({ mode: 'history', routes: routes });

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

index.js

import Vue from "vue"
import Router from "vue-router"
import Register from "@/components/Register"
import HelloWorld from "@/components/HelloWorld";
Vue.use(Router)

export default new Router({
  routes: [

    {
      path: "/register",
      name: "Register",
      component: Register
    },

  ]
})

标签： vue.js

解决方案

您的路线在 main.js 中为空：

const routes = []; //<= here

const router = new VueRouter({ mode: 'history', routes: routes });

假设您的路由器index.js位于“src/router”文件夹中，您不需要在 main.js 中实例化新的 VueRouter，而只需要像这样的自定义路由器：

import Vue from 'vue'
import App from './App.vue'
import router from './router' //<= import your index.js as "router"

Vue.config.productionTip = false

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

编辑：

如果要保留该history模式，则需要在客户路由器中定义它：

import Vue from "vue"
import Router from "vue-router"
import Register from "@/components/Register"
import HelloWorld from "@/components/HelloWorld";
Vue.use(Router)

export default new Router({
  mode: 'history, // <= here
  routes: [
    {
      path: "/register",
      name: "Register",
      component: Register
    },

  ]
})

推荐阅读