老师我跟着视频走为什么里面路由可以跳转但是页面上内容不显示呢。视频进行到一半的时候应该显示的首页，和用户中心等字样一个没出来，麻烦老师帮忙看看
main.js
import Vue from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import VueRouter from 'vue-router'
import Home from "./pages/Home.vue"
import User from "./pages/User.vue"
Vue.use(VueRouter)
Vue.config.productionTip = false
/**
* 定义路由，路由配置
*/
const routers = [
{
path:"/",
component:Home
},
{
path:"/user/:userid/:name",
component:User
}
]
/**
* 创建路由对象,将路由配置塞到路由对象当中
*/
const router = new VueRouter({
routers
})
/**
* 挂载路由，将路由对象挂载到vue实例当中
*/
/**
* Vue实例
*/
new Vue({
router,
render: h => h(App),
}).$mount('#app')App.vue
<template>
<div id="app">
<router-link to="/">首页</router-link> |
<router-link to="/user/10001/iwen">用户</router-link>
<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>Home.vue
<template>
<div>
<h3>首页</h3>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>User.vue
<template>
<div>
<h3>用户中心:{{ $route.params.userid }} - {{ $route.params.name }}</h3>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
点击按钮有跳转路由就是不显示内容
京公网安备 11011402011233号