lovecoding/web0715 @ a3053a8e2a2a2c0f53880bd207c643937e1bf423

VUE-ROUTER

vue2.0 => 3 vue3.0 => 4

安装命令： npm install vue-router@3

yarn add vue-router@4

1.创建路由文件 2.在main.js页面进行引入并挂载 3.创建页面详情见 router=>index.js 4.占位符:router-view 在哪里显示在哪里添加占位符切记：占位符无需多个按需显示即可 5.router-link 跳转标签

to:放置跳转到path
active-class:添加高亮

6.路由页面：

{
    path:"/路径",
    name:'当前页面名字',
    如果使用name属性  router-link上to必须进行动态绑定 =>App.js
    component:"当前路径的页面名字"
}

7.路由重定向 redirect:'默认页面路径' 8.多级路由配置在对应的路由对象下 path路径没有:/ 9.传参： query:

  <router-link active-class="active1" :to="`/list?names=小郑&age=2`">列表</router-link>

  <router-link active-class="active1" :to="{
    path:'/list',
    query:{
      names:'小孩',
      age:20
    }
  }">列表</router-link>
接收：
    js=>this.$route.query.xxx
    template=>$route.query.xxx

params:

在router页面

{
    path: "/my/:id/:name",
    component: My,
},
在router-link上
 <router-link active-class="active1" :to="`/my/123/哈哈哈`">我的</router-link>
 +++++++++++
 在路由上添加name属性
 在页面上
<router-link active-class="active1" :to="{
    name:'wode',
    params:{
      id:222,
      name2:'哈哈哈哈'
    }
  }">我的</router-link>
接收：
    js=>this.$route.params.xxx
    template=>$route.params.xxx

name只能用于params传参不能用于query传参 params对象传参不会暴露所传信息

10.声明式导航：

router-link

编程式导航: this.$router.push('具体跳转页面') this.$router.back() 返回上一页 this.$router.forward() 前进 this.$router.go(n) 自定义

11.replace和push 添加在声明式导航上的 replace 无浏览历史记录 push 存在浏览历史记录

12.路由懒加载按需加载节约性能在router页中component上（）=> import("路径")

13.组件缓存 keep-alive:讲需要保存的部分放到标签内按需保存案例：

<router-view></router-view>

activated:组件调用时候激活 deactivated：组件销毁时侯激活

14.路由的模式 hash: # 快安全即地址栏URL中的#符号，它的特点在于：hash 虽然出现URL中，但不会被包含在HTTP请求中，对后端完全没有影响，不需要后台进行配置，因此改变hash不会重新加载页面。 history：美观，干净慢 history模式改变了路由地址，因为需要后台配置地址。

15.路由守卫 a.全局守卫：

全局前置路由守卫：router.beforeEach
全局后置路由守卫：router.afterEach

b.独享守卫路由独享守卫：beforeEnter c.组件守卫: beforeRouteEnter:组件进入 beforeRouteLeave：组件离开

3.归纳.md 3.0 KB Geçmiş Ham

VUE-ROUTER

3.归纳.md 3.0 KB

Geçmiş Ham