vue学习day four

vue学习day four

网络请求跨域问题解决方案

同源策略：js采取的同源策略是浏览器的一项安全策略，浏览器只允许js代码请求和当前所在服务器域名，端口，协议相同的数据接口上的数据，这就是同源策略

目前主流的跨域解决方案

1. 后台解决：cors
2. 前台解决：proxy

在vue.config.js的module.exports里面写

devServer:{
	proxy:{
		'/api':{
			target:'http://iwenwiki.com',
			changeOrigin:true
		}
	}
}

在解决完跨域的问题之后，一定要记得重启服务器

vue引入路由配置 （路由：管理页面之间的关系 例如页面之间的跳转）

在Vue中，我们可以通过vue-router路由管理页面之间的关系

vue-router 是Vue.js的官方路由。它与Vue.js核心深度集成，让用Vue.js构建单页应用变得轻而易举

单页应用：项目只包含一个页面

在Vue中引入路由

1. 安装路由

   npm install --save vue-router
   

2. 配置独立的路由文件(src–>router–>index.js)

   //index.js
   import { createRouter, createWebHashHistory } from 'vue-router'
   import HomeView from '../views/HomeView.vue'
   
   const routes = [//创建一个数组的对象 数组中间存储页面的配置 每一个配置都是对象的形式
   	{
   		path:'/',//路径 
   		name:'home',
   		component:HomeView//写对应的组件
   	},
   	{
   		path:'/about',
   		name:'about',
   		//这是异步加载方式 如果页面没有被加载 这个组件就不会被引入
   		component:()=> import('../views/AboutView.vue')
   	}
   ]
   
   const router = createRouter({
   	history:createWebHashHistory(),//代表访问方式
   	routes
   })
   
   export default router;
   

   3. 引入路由到项目（写完之后要在main.js中实现引入）

import router from "./router"

create(App).use(router).mount('#app')

4. 在App.vue中显示路由

<template>
	//路由的显示入口
	<router-link to="/">首页</router-link>//5.指定路由跳转
	<router-link to="/about">关于</router-link>//指定路由跳转
	<router-view></router-view>//4.指定路由显示入口
</template>

路由传递参数

页面跳转过程中，是可以携带参数的，这也是很常见的业务 例如：在一个列表项中，点击进入查看每个列表项的详情

第一步：在路由配置中指定参数的key

{//index.js文件中修改
	path:"/list/:name",
	name:"list",
	component:()=> import("../views/ListView.vue")
}

第二步：在跳转过程中携带参数

//还需要在NewsView.vue中写出来对应的value
<li><router-link to="/newsdetails/百度">百度新闻</router-link></li>
<li><router-link to="/newsdetails/网易">网易新闻</router-link></li>
<li><router-link to="/newsdetails/头条">头条新闻</router-link></li>

第三步：在详情页面读取路由携带的参数

<p>{{ $route.params.name }}城市旅游景区详情</p>

嵌套路由配置：非常常见的需求

第一步：创建子路由要加载显示的页面

第二步：在路由配置文件中添加子路由配置

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: () => import('../views/AboutView.vue'),
    children:[
      {
        //二级导航的路径不需要加/
        path:"us",
        component:()=>import("../views/AboutSUb/AboutUs.vue")
      },
      {
        path:"info",
        component:()=> import("../views/AboutSUb/AboutInfo.vue")
      }
    ]
  }
]

第三步：指定子路由显示位置====(AboutView.vue组件中引入———父组件)

第四步：添加子路由跳转链接

<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>

第五步：重定向配置：假如有很多子页面，那当我们进入父页面时，应该默认进入第一个页面

写在index.js中 并且在父组件的括号中写
redirect:"/about/us"