vue Element-UI - 创建路由和组件

最新推荐文章于 2024-08-22 19:38:13 发布

mnmnwq

最新推荐文章于 2024-08-22 19:38:13 发布

阅读量295

点赞数

分类专栏：后端文章标签： vue.js elementui

本文链接：https://blog.youkuaiyun.com/mnmnwq/article/details/118014257

版权

后端专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍如何在Vue项目中配置路由，包括登录组件的创建及路由重定向设置等关键步骤。

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

之前的准备篇：https://blog.youkuaiyun.com/mnmnwq/article/details/117946436?spm=1001.2014.3001.5501

创建路由位置：src/router/index.js创建路由

在src./components下创建Login.vue文件

<template>
	<div>
		<h3>登录组件</h3>
	<div>
</template>
<script>
export default {}
</script>
<!-- scoped限定样式在当前组件起作用 -->
<style scoped>
</style>

router/index.js文件

index.js文件如下

// 1 . 先导入组件
// 2. 定义路由
// 3. 还可以定义子路由

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
// 导入登录组件
import Login from '../components/Login.vue'

Vue.use(VueRouter)

const routes = [
  // 访问 / 重定向到login
  { 
  	  path: '/',
      redirect: '/login' 
  },
  // 定义路由开始
  {
      path: '/login',
      component: Login
      // 子路由
      children: [{ path: '/welcome', component: Welcome }]
  },
  // 定义路由结束
  {
    path: '/',
    name: 'Home',
    component: Home
  }
]

const router = new VueRouter({
  routes
})

export default router