vue-router

hash和history

修改hash值可以在不刷新页面的情况下修改页面的url

histroy中有两个方法可以修改url

#pushstart（{}，‘’，‘hash’），使用栈的数据结构修改url，在栈顶添加hash

#replacestart（{}，‘’，‘hash’），替换掉栈顶的数据，将栈顶元素替换为hash

#forward（），相当于前进键

#back（），相当于后退键

#go（）

安装和配置

1.安装

1.在router的js文件中引入router和vue

   通过vue.use()方法安装router

2.创建一个router对象，传入一个对象作为参数，对象内有一个routes的

   数组属性，用来保存url和组件之间的映射

3.导入路由对象，在需要的地方进行引入使用

2.基本使用

1.在routes中添加映射关系时，每一个映射都是一个对象，每个对象有path和component属性

    path内写一个字符串，内容为路径的片段

   component内写导入的组件

2.在根组件上使用<router-link>引入映射（类似于a标签），使用to属性决定具体的映射（类似于href）

3.<router-view>标签决定映射的显示位置

3.配置

1.默认路径配置

{

   path: '',

    redirect:  '默认页面的path’,
}

2.在创建路由对象时，在对象中除了保存routes这个数组外，还可以传入一个mode属性

   mode: 'history'

  可以讲默认的哈希值修改url改为html5的history属性修改

3.<router-link>的属性

    #tag  决定渲染之后的标签类型

   #replace  不会留下history记录，不能通过返回键返回

   #active-class 当前使用的router-link标签内添加的默认类名

      也可以在创建路由对象时，增加一个LinkActiveClass的属性，属性值为类名

4.通过代码跳转路由   $router获取到的是整个路由对象

   this.$router.push('');

   this.$router.replace('');

动态路由

1.有时url不确定，会根据从服务器获取的数据的不同决定不同的路径，这种配置的路由称为动态路由

2.在配置路由映射时，后面跟上   : 变量名

3.在跟组件下设置data属性，通过v-bind指令动态修改url

4.$route可以获取到当前活跃的组件

    this.$route.params.变量名   可以获取到刚才在配置路由映射是设置的变量此时的值

路由的懒加载

当用到某个模块时再去加载

将不同的路由模块进行分包，当需要某个页面的数据时再去加载。

 

 

 

路由的嵌套

使用步骤

1.创建子组件

2.在组件内部创建<router-view>和<router-link>，<router-link>要写完整的路径

3.在对应的要嵌套的路由内写一个childre数组属性，每个数组元素是一个映射对象

 

 

参数使用

类型

1.parmas类型

   按照动态路由的方式传递

 

2.query类型

  

 

导航守卫

1、全局守卫（写在路由的index文件里）

Router.beforeEach(to,from,next){

   //to和from是路由对象，表示跳转前的页面和跳转后的页面的路由映射

  //next是一个函数，表示跳转之后执行的回调函数

}

 

Router.aftereach(to,from){

//不需要手动调用next函数

//执行顺序在beforeEach之后

}

 

meta属性：元数据（描述数据的数据）

2.路由独享的守卫

   在路由内写一个beforeeach的函数，和全局守卫的用法相同

3.组件内的守卫

  在组件中写一个beforerouterenter函数

 

 

keep-alive

1.功能

   可以将组件缓存下来，包含组件的状态，防止组件被重新渲染

2.使用

   将要缓存的组件放在<keep-alive>标签中

3.属性

  #include   值为字符串或者正则表达式，保留某些组件，多个组件用逗号分隔

  #exclude    值为字符串或者正则表达式，不保留某些组件，多个组件用逗号分隔