javascript - Vue js 不改变路由——vue 路由不起作用
问题描述
main.js
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
//Components
import Homepage from './components/Homepage.vue'
import Login from './components/Login.vue'
import RegistrationCompany from './components/RegistrationCompany.vue'
Vue.use(VueRouter);
Vue.config.productionTip = false
const routes = [
{ path : '/', name :'Homepage', component : Homepage },
{ path : '/login', name :'login', component : Login },
{ path : '/registration_company', name :'RegistrationCompany', component : RegistrationCompany },
]
const router = new VueRouter({
mode: "history",
routes
})
new Vue({
router,
render: h => h(App),
}).$mount('#app')
主页.vue
<template>
<div class="homepage">
<h1>Home</h1>
<p>
<router-link to="/login">Go to Login</router-link>
<router-link to="/registration_company">Go to Registration</router-link>
</p>
</div>
</template>
<script>
export default {
name: "Homepage",
props: {},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
应用程序.js
<template>
<div id="app">
<Homepage />
</div>
</template>
<script>
import Homepage from "./components/Homepage.vue";
export default {
name: "App",
components: {
Homepage,
},
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
一切似乎正常,它只工作过一次,但我不知道主js有什么变化,它又停止工作了
这是一个简单的代码,在主代码中我声明了路由,在主页中我放置了链接标签以重定向到组件。
但这些都不起作用,安装是用 npm 正常完成的
解决方案
看来你错过了router-view
<template>
<div class="homepage">
<h1>Home</h1>
<p>
<router-link to="/login">Go to Login</router-link>
<router-link to="/registration_company">Go to Registration</router-link>
</p>
<router-view />
</div>
</template>
推荐阅读
- javascript - WebGL - 如何在 Typescript 中正确地将程序参数传递给 gl.attachShader?
- c++ - Why is template name available in derived class (the base class is an instance of the template)?
- c - 我应该为 FreeRTOS 系统上的程序选择什么调度?
- hadoop - Hadoop 3.2.0 中的链映射器
- php - 从不同的页面 PHP 获取 JSON 数据
- excel - 计算字段 - 上面的数字计数
- python - 无法构建 boost python 库(致命错误:pyconfig.h:没有这样的文件或目录)
- java - java中的继承规则
- python - 试图从网站上抓取电子邮件地址
- ssl - 将本地数据发送到网络浏览器...如何?