vue项目中创建新页面的配置方法_vue index.js配置打开新窗口-优快云博客

本文链接：https://blog.youkuaiyun.com/zhouhouyong_web/article/details/121302187

本文档详细介绍了在Vue项目中创建新页面如`login.vue`，并配置相关路由的方法。首先，在`router/index.js`中导入新页面组件，设置路由规则，包括重定向和懒加载。接着，修改`main.js`文件，引入路由模块并配置Vue实例。最后，更新`app.vue`文件，使用`<router-view>`展示路由内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue项目中创建新页面的配置方法

主要目录和新建目录（git管理及创建vuecli项目）

新建的login.vue页面配置login路由。
新建一个router下的index.js文件（下面是代码）

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/login'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  mode: 'history', //去掉链接的#号
  base: '/', //去掉链接的/杠
  // 路由的懒加载
  routes: [
    {// 重定向
      path: '/',
      redirect: '/login'
     },
    {
      path: '/login',
      name: 'login',
      component: Login
    },
    {
      path: '/HelloWorld',
      name: 'hello',
      component: HelloWorld
    },
  ]
})

修改配置man.js文件（下面是代码）

import Vue from 'vue'
import App from './App.vue'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(Element)

// 安装路由
import router from './router'
import VueRouter from 'vue-router'
Vue.use(VueRouter);


Vue.config.productionTip = false

new Vue({
  router, 
  render: h => h(App),
}).$mount('#app')

修改配置app.vue文件配置（下面是代码）

<template>
  <div id="app">
    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <router-view></router-view>
  </div>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  // components: {
  //   HelloWorld
  // }
}
</script>