会员可以在此提问,百战程序员老师有问必答
对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题,会帮你学得更全面
截止目前,同学们一共提了 128778个问题
JAVA 全系列/第十六阶段:前后端分离技术VUE/Vue框架 1楼
JAVA 全系列/第十六阶段:前后端分离技术VUE/ES6新特性 2楼
JAVA 全系列/第十六阶段:前后端分离技术VUE/Vue3 3楼
JAVA 全系列/第十六阶段:前后端分离技术VUE/Vue3 4楼
JAVA 全系列/第十六阶段:前后端分离技术VUE/ES6新特性 5楼
JAVA 全系列/第十六阶段:前后端分离技术VUE/Vue3 6楼
JAVA 全系列/第十六阶段:前后端分离技术VUE/Vue3 7楼
JAVA 全系列/第十六阶段:前后端分离技术VUE/Vue3 8楼

image.png

我的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 router

main.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>


JAVA 全系列/第十六阶段:前后端分离技术VUE/Vue框架 9楼

issue.rar

老师:我这段代码哪里有问题吗?怎么加载不了图片啊?

JAVA 全系列/第十六阶段:前后端分离技术VUE/ES6新特性 11楼
JAVA 全系列/第十六阶段:前后端分离技术VUE/Vue框架 13楼
JAVA 全系列/第十六阶段:前后端分离技术VUE/Vue3 14楼
JAVA 全系列/第十六阶段:前后端分离技术VUE/ES6新特性 15楼

百战程序员微信公众号

百战程序员微信小程序

©2014-2024 百战汇智(北京)科技有限公司 All Rights Reserved 北京亦庄经济开发区科创十四街 赛蒂国际工业园
网站维护:百战汇智(北京)科技有限公司
京公网安备 11011402011233号    京ICP备18060230号-3    营业执照    经营许可证:京B2-20212637