vue-router-基础

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

yarn

猜你喜欢