vue-router-基础
- vue 路由的mode(模式)有几种， 分别是什么？在那些环境下运行？ 【 黄金 】
- hash: 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器。 #/home
- history: 依赖 HTML5 History API 和服务器配置。【需要后端支持】 /home
- abstract: 支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式。【 这个模式不常用 】
- hash/history 常用于浏览器端，abstract用于服务端
- 路由的使用步骤
-
. 装 vue-router
- yarn add vue-router -
在src目录下创建一个router目录， 里面创建一个index.js文件 ， 这个目录就是router的模块
-
引入第三方的依赖包, 并注册路由
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use( VueRouter ) //使用vue-router这个第三方插件
注意： import这个关键字要放在整个文件的上层
- 创建了一个router对象实例，并且创建路由表
const routes = [
{
path: '/home',
component: Home
}//每一个对象就是一个路由
]
const router = new VueRouter({
routes//路由表 必写的
})
- 导出router实例 export default router
- 入口文件main.js中引入路由实例 router , 然后在根实例中注册
import router from './router/index.js'
new Vue({
router,
render: (h) => App
}).$mount('#app')
-
给路由一个路由展示区域
- 如果是以及路由， 那么我们放在App组件中,用一个 router-view 的组 -
件表示当页面第一次的打开的时候， 需要做一个重定向， 就是要自动跳转到 /home 这个路由上
const routes = [
{ //我们要求这个路由的配置要放在路由表的最上方
path: '/',
redirect: '/home'
}
]
- 业务： 错误路由匹配
const routes = [
{
path: '/',
redirect: '/home' //重定向
},
{
path: '/home',
component: Home
},
{
path: '/list',
component: List
},
{
path: '/detail',
component: Detail
},
{
path: '/login',
component: Login
},
{
path: '/register',
component: Register
},
{
path: '/user',
component: User
},
{
path: '/shopcar',
component: Shopcar
},
{
path: '/error',
component: Error
},
{ //这个就是错误路由匹配， vue规定这个必须放在最下面，它必须将上面的路由全找一遍，找不到才用当前这个
path: '**',
redirect: '/error'
}
]
-
vue路由模式的确定
- mode如果你使用的是 hash , 那么a标签就可以了 - 如果你使用 history , 那么我们最好将a标签改成 router-link 这个组件 - router-link 这个组件 身上必须要有一个 to 属性 - router-link 这个组件身上加一个 keep-alive属性可以进行浏览器缓存 -
二级路由
const routes = [
{
path: '/shopcar',
component: Shopcar,
children: [
{
path: 'yyb', //不写 /
component: Yyb
}
]
}
]
-
注意： 写好配置之后，不要忘记了， 在对应的一级路由的组件中书写 路由展示区域
-
命名路由
- !!!作用： 就是简写路径了
{
path: '/shopcar',
component: Shopcar,
//子路由
children: [
{
path: 'yyb', // 容易犯错点 /yyb X
component: Yyb,
name: 'yyb' //命名路由
},
{
path: 'junge',
component: Junge
}
]
},
- 使用： 单项数据绑定to属性
<router-link :to = "{name:'yyb'}"/>
- router-link属性
- to
- 字符串 '/home'
- 对象
- tag
- active-class
- keep-alive
- 命名路由
在routes配置中有name选项的我们就称之为 命名路由
陌生词汇
config配置
intercept拦截
proxy:代理
Credential证书
如何在自己的vue项目引入组件库
1. vue常用组件库有哪些？
- pc
- iview
- element-ui
- ant design vue
- app
- Mint-ui
- vant
.2. 组件库虽然有很多，但是他们的引入方式大同小异
3. 所有的组件库安装形式有两种
1. 完整引入： 将组件库中所有组件全部引入进来
2. 按需引入： 将我们需要的组件引入进来
yarn
1. yarn 也是一个包管理器，这个东西好处就是可以团队开发版本的一致性
2. yarn add 包名称 表示生产环境安装
3. yarn add 包名称 -D 表示开发开发环境安装
4. yarn 它会根据package.json安装你的项目依赖包
5. yarn add 包名称 global 全局安装
6. 安装yarn
1. cnpm i yarn -g
什么是 credentials
credentials，即用户凭证，是指 cookie、HTTP身份验证和TLS客户端证书。需要注意的是，它不涉及代理身份验证或源标头。
XMLHttpRequest 的 withCredentials 属性
- 默认值为false。在获取同域资源时设置 withCredentials 没有影响。
- true：在跨域请求时，会携带用户凭证
- false：在跨域请求时，不会携带用户凭证；返回的 response 里也会忽略 cookie
axios中get和post请求差异在于data值
data = method.toLocaleLowerCase() === 'get' ? 'params' : 'data';
反向代理
数据请求封装
/* 做数据请求封装 */
import axios from 'axios'
import { resolve } from 'url';
// 1. axios默认配置
// axios.defaults.baseURL = 'https://api.example.com';
// axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
// axios.create({
// timeout: 1000,
// });
// 2. 开始封装
const request = ({
// axios选项
url,
method = 'GET',
headers,
params,
data,
withCredentials = false
}) => {
return new Promise((resolve, reject) => {
/* 1. 数据请求处理 */
switch (method) {
case 'POST':
axios({
url,
method,
data,
headers,
withCredentials
}).then(res => resolve(res))
.catch(err => reject(err))
break;
default:
/* get put delete */
axios({
url,
method,
headers,
params,
withCredentials
}).then(res => resolve(res))
.catch(err => reject(err))
break;
}
/* 2. 拦截器 */
// 添加请求拦截器
axios.interceptors.request.use(function(config) {
// 在发送请求之前做些什么
return config;
}, function(error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(function(response) {
// 对响应数据做点什么
return response;
}, function(error) {
// 对响应错误做点什么
return Promise.reject(error);
});
})
}
export default request
// vue.config.js中可以默认直接使用 http-proxy-middleware
module.exports = {
devServer: {
proxy: {
'/douban': { // /douban 是一个标记
target: 'http://api.douban.com', // 目标源
changeOrigin: true, // 修改源
pathRewrite: {
'^/douban': ''
}
},
'/siku': {
target: 'https://android.secoo.com',
changeOrigin: true,
pathRewrite: {
'^/siku': ''
}
}
}
}
}
/*
注意： 修改了项目配置文件，项目必须重启
*/
**！！！将数据请求挂载在Vue.prototype **
Vue.prototype.$http = request
前端数据请求
<script>
export default {
data () {
return {
categorys: null,
tabPosition: 'left'
}
},
async created () {
//进行数据请求，然后赋值我们当前组件的数据
const result =await this.$http({
url: '/index.php',
params: {
r: 'class/category',
type: 1
}
})
this.categorys = result.data.data.data
}
}
</script>
Vue.config.productionTip = falses是什么意思
阻止启动生产消息，常用作指令。
有了Vue.config.productionTip = false这句代码，它会阻止你显示显示生产模式的消息
! 路由的懒加载
! vue-router 懒加载是通过vue的异步组件和webpack的代码分割功能来完成的
const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')
path是路径
.比如说你在开发环境的地址是127.0.0.1:8888,那么你访问的路由地址是:127.0.0.1:8888/#/foo 以此类推.所以这个path是随意定义的.
然后转跳路由,直接写to='/foo',就可以.关于路由组件component: Foo 的foo就是通过Import导入的vue组件
! 路由重定向： 从某一个路由自动跳转到另外路由
path: '/', // http://m.maoyan.com/ > http://m.maoyan.com/hme
redirect: '/home',//重定向