关于前端:Vue-Router

装置 vue-router

npm install vue-router –save

搭建框架
在模块化工程中应用它（因为是一个插件，所以能够通过 Vue.use() 来装置路由性能）
- 第一步：导入路由对象，并且调用 Vue.use(VueRrouter)
- 第二步：创立路由实例，并且传入路由映射配置
- 第三步：在 Vue 实例中挂载创立的路由实例
在 src 文件夹下手动创立 router 文件夹
router 文件夹内创立 index.js

index.js 中编写

          // 配置路由相干的信息 搭建框架
              import VuRouter from 'vue-router'
              import Vue from 'vue'
          
          //1. 通过 Vue.use(插件)，装置插件
          Vue.ues(VueRouter)
          
          //2. 创立 VueRouter 对象
          const routes = [ ]
          const router = new VueRouter({
              // 配置门路和组件之间的利用关系
              routes:
          }) 将 router 对象传入到 vue 实例
          export default router
          
          //3.
              // 将 router 对象传入到实例中
              // 在 main.js 实例中
              import router from '门路'
              router: router

创立路由组件 / 在 components 文件夹内

配置路由映射：组件和门路映射关系

在 index.js 文件中

        // 导入 components 中相干组件
        import Home from '组件门路'
        import Home from '组件门路'

            
            const routes = [
                {path:'/home（可换）',
                component:null    // 一个映射关系就是一个对象
                },
                {
                path:'/about（可换）',
                component:null
                }
            ]

应用路由：通过 <router-link> 和 <router-view>
- 在 app.vue 中写
- <router-link> 相当于 a 标签
```
        <router-link to="home"> 首页 </router-link>
```
- <router-view> 相当于将内容显示在 link 下面或者上面

路由的默认门路

让门路默认跳进首页并且能够被渲染

只有在多配置一个映射就能够了

        const routes = [
                {
                path:'/',
                redirect:'/home'
                }
        ]
        // 在 route 中又配置了一个映射
        pa/th 配置的是根门路
        redirect 是重定向，也就是咱们将根门路重定向到 /home 的门路下，这也就能够失去想要的后果了

tag：tag 能够指定 <router-link> 之后渲染成什么组件。<router-link to/’home’ tag=’button’> 将会被渲染成 button 按钮就
replace：replace 不会留下 history 记录，所以指定 replace 的状况下，后退键返回不能返回到上一个页面
active-class：当 <router-link> 对应的路由匹配胜利时，会主动给以后元素设置一个 router-link-active 的 class，设置 active-class 能够批改默认的名称
- 在进行高亮显示的导航菜单或者底部 tabbar 时，会应用到该类
- 然而通常不会批改类的属性，会间接应用默认的 router-link-active

this.$router.push(‘/home’)

用到时再加载
当打包构建利用时，Javascript 包会变得十分大，影响页面加载
如果咱们能把不同路由对应的组件宰割成不同的代码块，而后当路由被拜访的时候才加载对应组件，这样就更加高效了
路由懒加载的次要作用就是将路由对应的组件打包成一个个的 js 代码块
只有在这个路由被拜访到的时候，才加载对应的组件

懒加载的形式

形式一：联合 Vue 的异步组件和 Webpack 的代码剖析

        const Home = resolve => {require.ensure(['../components/Home.vye'],() => {resolve(require('../components/Home.vue'))
        })};    // 老版

形式二：AMD 写法

        const About = resolve => require(['../components/About.vue'], resolve);

形式三：ES6 中，更加简略的写法来组织 Vue 异步组件和 Webpack 的代码宰割
```
        const Home = () => import('../components/Home.vue')
        
```

嵌套路由是一个很常见的性能
- 比方在 home 页面中，咱们心愿通过 /home/news 和 /home/message 拜访一些内容
- 一个门路映射一个组件，拜访这两个路劲也会别离渲染两个组件
实现嵌套路由有两个步骤：
- 创立对应的子组件，并且在路由映射中配置对应的子路由
- 在组件外部应用 <router-view> 标签

            // 创立组件，比方 news，message（内容显示在首页里）// 关上 index.js
            const HomeNews = () => import('../components/HomeNews')
            const HomeMessage = () => import('../components/HomeMessage')
                
                
            const routes = [
                path: '/home',
                children; [
                    {
                        path:'news'        // 子路由不须要加‘/’component:HomeNews
                    },
                    {
                        path:'Message'        // 子路由不须要加‘/’component:HomeMessage
                    }
                ]
            ]
            
            
            // 关上 Home.vue
            <router-link to="/ome/news"> 新闻 </router-link>
            <router-link to="/home/message"> 新闻 </router-link>
            
            <router-view></router-view>

传递参数次要有两种类型：params 和 query
params 的类型
- 配置路由格局：/router/:id
- 传递的形式：在 path 前面跟上对应的值
- 传递后造成的门路：/router/123, /router/abc
query 的类型
- 配置路由格局：/router，也就是一般配置
- 传递的形式：对象中应用 query 的 key 作为传递形式
- 传递后造成的门路：/router？id=123，/router?id=abc
应用：<router-link> 的形式和 Javascript 代码形式

            router.beforeEach((to,from,next)) => {document.title = to.matched[0].meta.title
            console.log(to)
            next()}

keep-alive 是 Vue 内置的一个组件，能够使被蕴含的组件保留状态，或防止从新渲染
router-view 也是一个组件，如果间接被包在 keep-alive 外面，所有门路匹配到的视图组件都会被缓存
用法：蕴含住 <router-view>
keep-alive 是 Vue 内置的一个组件，能够使被蕴含的组件保留状态，或防止从新渲染
- 它们有两个十分重要的属性：
- include – 字符串或正则表白，只有匹配的组件会被缓存
- exclude – 字符串或正则表达式，任何匹配的组件都不会被缓存 <keep-alive exclude=”Home,User”> // 不能轻易加空格
router-view 也是一个组件，如果间接被包在 keep-alive 外面，所有门路匹配到的视图组件都会被缓存

关于前端:Vue-Router

VueRouter

应用 vue-router 的步骤

router-link 补充

通过代码跳转路由

路由懒加载

路由的嵌套应用

参数传递

导航守卫

keep-alive