Vue项目问题与分析

最新推荐文章于 2022-04-23 00:58:50 发布

T仔_y

最新推荐文章于 2022-04-23 00:58:50 发布

阅读量652

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_43616689/article/details/105135243

版权

Vue 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

一、index.html文件的功能：

1.文件内容只有一个<div id="id"></div>，相当于整个web项目页面的载体；
index.html文件内容：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>myvue</title>
  </head>
  <body>
    <div id="home"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

二、main.js文件的功能：

1.配合index.html构成整个web项目页面的载体；
2.new Vue中el元素：联系index.html中div，el: '#home'
3.new Vue中router，定义的路由名称：import router from './router'
4.new Vue中components元素：需要用到的组件，components: { Home }
5.new Vue中template元素：首次载入index.html中的页面，template: '<Home/>'
main.js文件内容：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import Home from './views/Home'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#home',
  router,
  components: { Home },
  template: '<Home/>'
})

三、路由跳转index.js配置

import Vue from 'vue'
import Router from 'vue-router'
import Home from '../views/Home'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
      children: [
        { path: 'login1',
          component: () => import('@/views/Login')
        }
      ]
    },
    {
      path: '/login',
      name: 'Login',
      component: () => import('@/views/Login')
    }
  ]
})

1.path:访问的路径
2.name:组件名称
3.component:引入组件
4.children:子组件,当父组件中有<router-view/>时,访问子组件路径(父组件path+子组件path),将会显示子组件内容;注:子组件path值不需要加/

四、解决跨域访问问题:

package com.example.mymicroserviceuser.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.filter.OncePerRequestFilter;

import javax.servlet.FilterChain;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

/**
 *  不加这个前端报No Access-Control-Allow-Origin错误
 */
@Configuration
public class CorsFilter extends OncePerRequestFilter {
    @Override
    protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response,
                                    FilterChain filterChain)throws ServletException, IOException {
        // Access-Control-Allow-Origin: 指定授权访问的域
        response.addHeader("Access-Control-Allow-Origin", request.getHeader("Origin")); //此优先级高于@CrossOrigin配置,此处应该与前端配置的一致
        //response.addHeader("Access-Control-Allow-Headers", "Origin, x-requested-with, Content-Type, Accept,X-Cookie");
        response.addHeader("Access-Control-Allow-Headers", request.getHeader("Access-Control-Request-Headers"));//
        response.setHeader("Access-Control-Allow-Credentials", "true");
        // Access-Control-Allow-Methods: 授权请求的方法（GET, POST, PUT, DELETE，OPTIONS等)
        response.addHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE,OPTIONS");
        response.addHeader("Access-Control-Max-Age", "1800");//30 min
        filterChain.doFilter(request, response);
    }
}

T仔_y

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue项目问题与分析

一、index.html文件的功能：1.文件内容只有一个<div id="id"></div>，相当于整个web项目页面的载体；index.html文件内容：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="view...
复制链接

扫一扫

专栏目录