vue-router-基础

Posted 2020-12-01 hff-syt

vue-router-基础

1. vue 路由的mode(模式)有几种， 分别是什么？在那些环境下运行？ 【 黄金 】

• hash: 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 html5 History Api 的浏览器。 #/home
• history: 依赖 HTML5 History API 和服务器配置。【需要后端支持】 /home
• abstract: 支持所有 javascript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式。【 这个模式不常用 】
• hash/history 常用于浏览器端，abstract用于服务端

1. 路由的使用步骤

• . 装 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‘,//重定向

```