我的main部分加载不出来
App.vue
<template>
<div id="app">
<router-link to="/">首页</router-link>|
<!-- <router-link :to="{ name:'home'}">首页</router-link>| -->
<!-- <router-link to="/user/10001">用户中心</router-link>| -->
<router-link :to="{name:'User',params:{userid:'10000001'}}">用户中心</router-link>|
<router-link to="/news">新闻页面</router-link>
<router-view></router-view>
<router-view name="AD"></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</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>
<h4>......</h4>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../pages/Home.vue'
import User from '../pages/User.vue'
import News from '../pages/News.vue'
import Sports from "../pages/newssub/sports.vue"
import Yule from '../pages/newssub/yule.vue'
import AD from '../pages/ad.vue'
Vue.use(VueRouter)
/**
* 定义路由
*/
const routes=[
{
path:"/",
name:"Home",
component:{
default:Home,
AD:AD
}
},
{path:"/user/:userid",name:"User",component:User},
{
path:"/news",
name:"News",
component:News,
children:[
{
path:"sports",
component:Sports
},
{
path:"yule",
component:Yule
}
]
}
]
/**
* 创建路由对象
*/
const router=new VueRouter({
routes
})
export default routermain.js
import Vue from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
Vue.config.productionTip = false
/**
* 挂载路由
*/
new Vue({
router,
render: h => h(App),
}).$mount('#app')ad.vue
<template>
<div>
<h3>广告页面</h3>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
京公网安备 11011402011233号