关于javascript:vuerouter路由的理解

意识路由

• 路由用于设定拜访门路，将门路和组件映射起来

在 vue-router 中的单页面利用中，页面的门路的扭转就是组建的切换

后端路由：后端解决 URL 和页面之间的映射关系
前端路由：前端治理 URL 和页面之间的映射关系

vue-router 根本应用

步骤一：装置 vue-router

npm install vue-router --save

步骤二：在模块化工程中应用

1. 导入路由对象，并调用 Vue.use(VueRouter)，装置插件

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

1. 创立路由实例，并且传入路由映射配置

// 从下层文件导入两个组件
import Aaa from '../components/Aaa'
import Bbb from '../components/Bbb'

const routes = [// 配置映射关系，一个 {} 对应一个组件
   {
     path:'/aaa',
     component:Aaa
   },
   {
     path:'/bbb',
     component:Bbb
   }
]
const router = new VueRouter({routers})
export default router

1. 在 Vue 实例中挂载创立的路由实例

new Vue({
  el:'#app',
  router,
  render: h => h(App)
})

应用 vue-router 的步骤：

1. 创立路由组件
2. 配置路由映射：组件与门路映射关系
3. 应用路由：通过 <router-link> 和<router-view>

<router-link>: 该标签是 vue-router 中曾经内置的组件，它会被渲染成一个 <a> 标签.
<router-view>: 该标签会依据以后的门路，动静渲染出不同的组件.

<router-link>的属性：

• to：用于指定跳转的门路

<router-link to="/about"> 对于 </router-link>

• tag: 能够指定 <router-link> 之后渲染成什么组件

<router-link to="/about" tag="button"> 对于 </router-link>

• replace: 不会留下 history 记录，因而指定 replace 的状况下，后退键不能返回到上一个页面中

<router-link to="/about" tag="button" replace> 对于 </router-link>
//replace 前面不须要加任何货色

vue-router 动静路由

1. 配置 user，创立一个简略的映射关系

{
  path:'/user/:aaa',
  component:User
}

1. 在 <router-link> 中应用 v-bind 动静绑定

<router-link：to="/user/+userId"> 用户 </router-link>

3. 在 User.vue 文件中拿到传过来的用户 ID

userId(){return this.$route.params.aaa}

路由的懒加载

当打包构建利用时，Javascript 包会变得很大，因而将路由对应的组件宰割成不同的代码块，当路由被拜访时才加载对应组件，提高效率.

懒加载的形式：

1. 联合 Vue 的异步组件和 Webpack 的代码剖析

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

1. AMD 写法

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

3. 在 ES6 中，能够用更简略的写法来组织 Vue 异步组件和 Webpack 的代码宰割

const Home = () => import('../components/Home.vue')
// 举荐写法, 写在入口文件中

vue-router 嵌套路由

在理论利用界面中，页面往往由多层嵌套的组件组成

1. 定义“登录”和“注册”两个组件

<template id="login"> 
    <div> 登录界面 </div>
</template> 
<template id="reg">
    <div> 注册界面 </div>
</template>

// 定义路由组件
const Login = {template: '#login'}; 
const Reg = {template: '#reg'};

2. 定义路由，通过 children 嵌套

const routes = [{ path: '/', redirect: '/home'},
  { 
    path: '/home',
    component: Home, 
    children:[{ path: '/home/login', component: Login}, 
       {path: '/home/reg', component: Reg}
    ] 
  }, 
  {path: '/news', component: News}
]

vue-router 参数传递

传递参数次要有两种类型：params和query

params 的类型：

• 配置路由格局：/router/:id
• 传递的形式：在 path 前面跟上对应的值
• 传递后造成的门路：/router/aaa,/router/bbb

query 的类型：

• 配置路由格局：/router，也就是一般配置
• 传递的形式：对象中应用 query 的 key 作为传递形式
• 传递后造成的门路：/router?id=aaa,/router?id=bbb

这里讲一下 URL：
协定：// 主机：端口 / 门路？查问
scheme://host:port/path?query#fragment

vue-router 导航守卫(guard)

一、全局守卫

前置钩子(hook)

 router.beforeEach((to,from,next)=>{})

to：行将要进入的指标的路由对象
from：以后导航行将要来到的路由对象
next：调用该办法后，能力进入下一个钩子

能够利用 beforeEach 来实现题目的批改

后置钩子

router.afterEach((to,from)=>{})

只有两个参数，to 和 from

二、组件内的守卫

beforeRouteEnter

beforeRouteEnter:(to,from,next)=>{}

留神：beforeRouteEnter函数在 data() 函数之前，即，调用 beforeRouterEnter 函数时，组件还没有初始化, 此时不能应用 this 来代表实例组件

beforeRouteUpdate

beforeRouteUpdate:(to,from,next)=>{}

beforeRouteLeave

beforeRouteLeave:(to,from,next)=>{}

三、路由独享的守卫

beforeEnter:(to,from,next)=>{}

用法与全局前置守卫统一，只是将其写进其中一个路由对象中，只在这个路由下起作用

keep-alive

keep-alive 是 Vue 内置的一个组件，能够使被蕴含的组件保留状态，或防止从新渲染

<keep-alive>
      <component>
      <!-- 该组件将被缓存 -->
      </component>
</keep-alive>

include：字符串或正则表白，只有匹配的组件会被缓存

<keep-alive include="a">
   <component>
  <!-- name 为 a 的组件将被缓存！-->
    </component>   
</keep-alive>

exclude：字符串或正则表达式，任何匹配的组件都不会被缓存

<keep-alive exclude="a">    
   <component>   
 <!-- 除了 name 为 a 的组件都将被缓存！-->    
   </component>  
</keep-alive>

router-view 也是一个组件，如果间接被包在 keep-alive 外面，所有门路匹配到的视图组件都会被缓存

<keep-alive>   
   <router-view>    
 <!-- 所有门路匹配到的视图组件都会被缓存！-->   
   </router-view>  
</keep-alive>

减少 router.meta 属性

//routes 配置
export default [
 {
   path:'/',
   name:'home',
   component:Home,
   meta:{keepAlive:true  // 须要被缓存}
 },{
   path:'/:id',
   name:'edit',
   component:Edit,
   meta:{keepAlive:false  // 不须要被缓存}
 }
]

<keep-alive>
   <router-view v-if="$route.meta.keepAlive">
      <!-- 这是是会被缓存的视图组件，比方 Home-->
   </router-view>
</keep-alive>

<router-view v-if="!$route.meta.keepAlive">
      <!-- 这是是不会被缓存的视图组件，比方 Edit-->
</router-view>