我试图通过url访问其他页面,但是这些页面从不加载
这是我的main.js文件:
import Vue from 'vue'
import App from './App.vue'
import VueRouter from "vue-router"
Vue.config.productionTip = false
Vue.use(VueRouter);
import Users from './components/Users.vue'
const Home = { template: "<p>home page</p>" };
const Index = { template: "<p>index page</p>" };
const About = { template: "<p>about page</p>" };
const routes = [
{ path: "/users", name: "users", component: Users },
{ path: "/home", name: "home", component: Home },
{ path: "/index", name: "index", component: Index },
{ path: "/about", name: "about", component: About },
];
var router = new VueRouter({
routes: routes,
mode: "history",
});
new Vue({
router: router,
render: h => h(App),
}).$mount('#app')
有人知道为什么vue-router不起作用吗?
[我使用Vue CLI创建了这个项目,然后安装了npm install vue-router,基本上我只是在./components/users中添加了一个新组件,还修改了main.js文件,仅此而已。
我将我的项目上传到GitHub:https://github.com/alex-developer-18x/vueapp
我运行了您的代码,问题是因为您没有使用“ router-view”。转到您的App.vue并添加“ router-view”组件。
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<!-- You should add this instead of <HelloWorld/> -->
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
components: {
}
}
</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>