Vue项目-路由demo

创建项目

前端项目准备（使用vue脚手架创建）

项目准备

删除不要的组件

• 删除views文件夹
• 删除compoents目录下的所有文件

修改APP.vue

<template>
  <div id="app">
    <!-- 路由占位符 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
    
    
  name: 'app'
}
</script>

<style>
</style>

创建登录组件

在compoents目录下，新建Login.vue文件

<template>
  <div>登录组件</div>
</template>

<script>
export default {
    
    }
</script>

<style lang="less" scoped>
</style>

设置路由

修改router目录下index.js文件

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

Vue.use(VueRouter)

const routes = [
  // 根路径重定向到登录
  {
    
    
    path: '/',
    redirect: '/login'
  },
  // 登录
  {
    
    
    path: '/login',
    component: Login
  }
]

const router = new VueRouter({
    
    
  routes
})

export default router

启动项目

npm run serve

页面显示登录组件即可