vue-cli4创建的vue项目如何更改其默认首页_编程技术网-程序员技术内容聚合平台

（在说正事之前，我要推荐一个福利：你还在原价购买阿里云、腾讯云、华为云服务器吗？那太亏啦！来这里，新购、升级、续费都打折，能够为您省60%的钱呢！2核4G企业级云服务器低至69元/年，点击进去看看吧>>>)

如题，更改了router的默认访问路径访问login，但是页面显示出来的还是App.vue的内容

index.html

<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title>
    <%= htmlWebpackPlugin.options.title %>
  </title>
</head>

<body>
  <noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
        Please enable it to continue.</strong>
  </noscript>
  <div id="app"></div>
  <!-- built files will be auto injected -->
</body>

</html>

App.vue

<template>
  <div class="container bg">
    <div id="login"></div>
    <p>lalalal</p>
  </div>

  <!-- <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </div>
  <router-view /> -->
</template>

<script>
export default {
  name: "app",
  components: {},
};
</script>

<style lang="less">
@min-width: 800px;
@ft-24: 24px;
@ft-16: 16px;
@ft-14: 14px;
@c-51: #515151;
@c-ff: #ffffff;
@wh-100: 100%;

html,
body,
#app {
  width: @wh-100;
  height: @wh-100;
  margin: 0;
  padding: 0;
}
.contet {
  height: @wh-100;
}
#app {
  width: @wh-100;
  height: @wh-100;
  background-image: url("./assets/img/login_bg.webp");
}
p {
  color: red;
}

// #app {
//   font-family: Avenir, Helvetica, Arial, sans-serif;
//   -webkit-font-smoothing: antialiased;
//   -moz-osx-font-smoothing: grayscale;
//   text-align: center;
//   color: #2c3e50;
// }

// #nav {
//   padding: 30px;

//   a {
//     font-weight: bold;
//     color: #2c3e50;

//     &.router-link-exact-active {
//       color: #42b983;
//     }
//   }
// }
</style>

main.js

import {
  createApp
} from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import $ from 'jquery'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min'
import axios from 'axios'



// Vue.config.productionTip = false;
const app = createApp(App)
app.config.globalProperties.$ = $;
app.config.globalProperties.axios = axios;
app.use(store).use(router).mount('#app')

router - index.js

import {
  createRouter,
  createWebHistory
} from 'vue-router'
import Home from '../views/Home.vue'
import Product from '../components/Product.vue'
import Login from '../views/Login.vue'

const routes = [{
    path: '/',
    name: 'Login',
    component: () => import( /* webpackChunkName:"login" */ Login),
    meta: {
      title: "登录"
    }
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import( /* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

views - Login.vue

<template>
  <div class="row justify-content-md-center">
    <div class="col-md-4 col-sm-8">
      <span class="user-icon"></span><input type="text" class="user-id" />
    </div>
  </div>
</template>
<script>
export default {
  name: "login",
  data() {
    return {};
  },
  methods: {
    // 获取
  },
};
</script>~~~~

###

main.js里有一句

const app = createApp(App)

改这个

###

app.vue 是作为vue项目的主组件，所有的页面都是在它里面进行切换的，
所以app.vue里面的内容都会展示
一般写的话app.vue里面只写<router-view><router-view>
不要在里面写其他多余标签这样有助于自定义其他页面
你把router-view注释了他就相当于一个容器你访问login login不知道template里面的内容应该放到哪里