vue.js路由器链接未加载组件

Question

vue.js路由器链接未加载组件

Kar*_*lom 2 javascript vue.js vue-router vue-component

我是vue.js的新手，并制作了此Landing组件，该组件链接到该Login组件。我要实现的是，当用户单击“登录”时，将显示登录页面。

<template>
        <div>
            <div class="landing">
                <router-link to="/login">Login</router-link>
                </div>
            </div>
        </div>
    </template>

    <script>

    export default {
        name: 'Landing',
        data: function () {
            return {
            }
        },
        methods:  {

        }
    }
    </script>

Run Code Online (Sandbox Code Playgroud)

main.js：

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import Materials from "vue-materials"

import Routes from './routes'

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


Vue.use(Materials)
Vue.use(VueRouter);

Vue.config.productionTip = false

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

Run Code Online (Sandbox Code Playgroud)

App.Vue：

<template>
  <div id="app">
        <head>
          <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
          <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.css" rel="stylesheet">
        </head>

        <NavbarComp/>        
        <Landing/>
        <FooterComp/>
  </div>
</template>

<script>
import NavbarComp from './components/Navbar.vue';
import FooterComp from './components/Footer.vue';
import Landing from './components/Landing.vue';
import Login from './components/Login.vue';
import Register from './components/Register.vue';

export default {
  name: 'app',
  components: {
    NavbarComp,
    Landing,
    FooterComp,
    Login,
    Register
  }
}
</script>

Run Code Online (Sandbox Code Playgroud)

route.js：

import Login from './components/Login.vue'; 
import Register from './components/Register.vue'; 
import Landing from './components/Landing.vue'; 

export default [
  {path: '/login', component: Login, name: 'Login'},
  {path: '/register', component: Register, name: 'Register'},
  {path: '/', component: Landing, name: 'landing'},
]

Run Code Online (Sandbox Code Playgroud)

最后，Login.vue：

<template>  
  <div>
     <h2>Login</h2>    
   </div>

</template>

<script>

import axios from 'axios';

export default {
  name: 'Login',
  data: function () {
      return {
        ok: true,
        showErrorRegister: false,
        showErrorLogin: false,
        username: "",
        password: "",
        email: "",
        error: "",            
      }   
  },

Run Code Online (Sandbox Code Playgroud)

当我单击“登录”链接时，URL栏中的链接会更改，但该组件不会出现，并且在控制台中看不到任何错误。所以不知道从这里去哪里。

我怎样才能解决这个问题？

Answer 1

小智 5

详细阐述Cory的评论-我认为这是问题所在。你失踪了<router-view>。

您的应用当前似乎可以正常运行，因为在App.Vue中您正在渲染<Landing/>组件。您应该替换<Landing/>为<router-view/>。这样，当路径为“ /”时，<router-view>将<Landing/>在该空间中渲染组件-就像现在一样。当路由路径（通过router-link）更改为“ / Login”时，路由器将<Login/>改为在该空间中呈现组件。

当前，路由器指向正确的登录组件，但是无处可呈现。

在此处阅读更多信息：https : //router.vuejs.org/guide/#html

归档时间：	7 年，1 月前
查看次数：	2646 次
最近记录：	7 年，1 月前