Vue美食杰项目实现个人编辑资料效果

1.需求介绍：

（1）先点击编辑个人资料跳转到个人编辑页。
（2）到编辑页进行对头像，名称，个人简介进行修改点击保存获取信息后发送给后端。
（3）后端拿到数据进行页面渲染。

2.效果展示

1.先点击编辑个人资料跳转到个人编辑页。

（1）需要在router下的index.js文件中写路由配置实现路由跳转功能 （2）导入edit.vue文件：import Edit from ‘@/views/user-space/edit.vue’

(3)在路由表里进行路由配置:{ path:'/edit', name:"edit", title:'编辑', component:Edit },
(4）实现跳转：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)
import {
   userInfo} from '@/service/api';
import Store from '@/store'


import Home from '@/views/home/Home.vue'
import Login from '@/views/user-login/index.vue'
import Space from '@/views/user-space/space.vue'
import Recipe from '@/views/recipe/recipe.vue'
import Detail from '@/views/detail/detail.vue'
import Edit from '@/views/user-space/edit.vue'
const router = new Router({
   
    mode:"history",
    routes:[
        {
   
            path:'/',
            name:"Home",
            title:'首页',
            component:Home
        },
        {
   
            path:'/edit',
            name:"edit",
            title:'编辑',
            component:Edit
        },
        {
   
            path:'/detail',
            name:"detail",
            title:'详情',
            component:Detail
        },
        {
   
            path:'/login',
            name:'login',
            title:'登录页',
            component:Login,
            meta:{
   
                login:true
            },
        },
        {
   
            path