我已经尝试了 100 次,但我的路由器根本不工作! 我不能在我的 vue 项目中导航或切换到不同的页面。我也遵循了链接 https://www.thepolyglotdeveloper.com/2017/11/router-navigate-pages-vuejs-application/ 中给出的所有步骤,但没有任何变化。
这是我的代码:
main.js
import Vue from 'vue'
import App from './App.vue'
import "bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
//import router from '../router'
//import VueRouter from 'vue-router'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
index.js
import Vue from 'vue'
import Router from 'vue-router'
import Page1 from '@/components/page1'
import Page2 from '@/components/page2'
Vue.use(Router)
export default new Router({
routes: [
{
path: "/",
redirect: {
name: "Page1"
}
},
{
path: '/page1',
name: 'Page1',
component: Page1
},
{
path: '/page2',
name: 'Page2',
component: Page2
}
]
})
现在这是我的一个页面的示例,我希望它的地址是 localhost:8080/page1 但它不会出现..
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<router-link to="/page2">Navigate to Page2</router-link>
</div>
</template>
<script>
export default {
name: 'Page1',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
请有人告诉我该怎么做
答案 0 :(得分:0)
您的 main.js
必须如下所示:
import Vue from 'vue'
import App from './App.vue'
import "bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
import router from '../router';
Vue.config.productionTip = false;
new Vue({
render: h => h(App),
router,
}).$mount('#app')
同样在 App.vue
中,您必须有 <RouterView />
:
<template>
<RouterView />
</template>