Vue-router路由系统介绍

时间 2021-02-13

标签 javascript html 前端 vue java react ajax vue-router npm 编程栏目系统网络繁體版

原文原文链接

路由原理

传统开发方式 url改变后马上发起请求，响应整个页面，渲染整个页面
SPA 锚点值改变后不会发起请求,发起ajax请求,局部改变页面数据javascript
- 页面不跳转用户体验更好

SPA

single page application(单页应用程序)
前端路由html
- 锚点值监视
- ajax获取动态数据
- 核心点是锚点值
前端框架 Vue/angular/react都很适合开发单页应用

基本使用

vue-router
其是vue的核心插件
1:下载 npm i vue-router -S
1.5(重要):安装插件Vue.use(VueRouter);
2:在main.js中引入vue-router对象 import VueRouter form './x.js';
3:建立路由对象 var router = new VueRouter();
4:配置路由规则 router.addRoutes([路由对象]);前端
- 路由对象{path:'锚点值',component:要(填坑)显示的组件}
5:将配置好的路由对象交给Vuevue
- 在options中传递-> key叫作 router
6:留坑(使用组件) <router-view></router-view>

router-link

to<router-link to="/xxx/x">点我</router-link>
帮助咱们生成a标签的href
锚点值代码维护不方便，若是须要改变锚点值名称java
- 则须要改变 [使用次数 + 1（配置规则）] 个地方的代码

命名路由

1:给路由对象一个名称 { name:'home',path:'/home',component:Home}
2:在router-link的to属性中描述这个规则react
- <router-link :to="{name:'home'}></router-link>"
- 经过名称找路由对象，获取其path，生成本身的href
大大下降维护成本，锚点值改变只用在main.js中改变path属性便可

参数router-link,

Vue.prototype.xxx = {add:fn}
全部组件中，使用this.xxx就能拿到这个对象
查询字符串ajax
- 1:配置:to="{name:'detail',query:{id:hero.id} }"
- 2:规则 {name:'detail',path:'/detail',component:Detail}
- 3:获取 this.$route.query.id
- 4:生成 <a href="/detail?id=1">
path方式vue-router
- 4:生成 <a href="/detail/1">
- 1:配置 :to="{name:'detail',params:{id:hero.id} }"
- 2:规则 { name:'detail',path:'/detail/:id'}
- 3:获取 this.$route.params.id
查询字符串配置参数npm
- router-link一次
- 获取的时候一次
path方式配置参数编程
- router-link一次
- 规则配置的时候声明位置
- 获取的时候一次
总结书写代码注意事项
- path方式须要在路由规则中声明位置

别名

/a的别名是/b，意味着当用户访问/b时，URL会保持为/b，可是路由匹配则为/a，就像用户访问/a同样。

{ path: '/a', component: A, alias: '/b' }

重定向

// 方式一：字符串路径path
{ path: '/a', redirect: '/b' }
// 方式二：name
{ path: '/a', redirect: {name: 'b'} }
// 方式三：动态返回重定向目标
{ path: '/a', redirect: to => {
  // 方法接收 目标路由 做为参数；return 重定向的 字符串路径/路径对象 
}}

阶段总结

vue-router使用步骤 : 1:引入 2:安装插件 3:建立路由实例 4:配置路由规则 5:将路由对象关联vue 6:留坑
router-link to="/xxx" 命名路由
- 1. 在路由规则对象中加入name属性
  2. 在router-link中 :to="{ name:"xxx'} "
$route 路由信息对象,只读对象
$router 路由操做对象,只写对象
下图来自vue-router源码
- 1. Vue.use(插件对象); // 过程当中会注册一些全局组件,及给vm或者组件对象挂在属性
  2. 给vm及组件对象挂在的方式 : Object.defineProperty(Vue.prototype,'$router',{
    get:function () {
    return 本身的router对象;
    
    }
    
    })

嵌套路由

须要根据锚点值的改变，仅仅变化上图中的Profile到Posts组件，便可使用嵌套路由

代码思想
- 1:router-view的细分
  - router-view第一层中，包含一个router-view
- 2:每个坑挖好了，要对应单独的组件
使用须知: 1:router-view包含router-view 2:路由children路由

路由守卫

它其实就是一个路由改变的事件回调函数

全局路由守卫
- 前置router.beforeEach((to, from,next) => {})
- 后置router.afterEach((to, from) => {})

路由独享的守卫

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) =>{
        // ...
      }
    }
  ]
})

组件内的守卫

const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 由于当守卫执行前，组件实例还没被建立
    // 可是，能够这样用
      next(vm => {
        // 经过 `vm` 访问组件实例-> 将来的组件this
          vm.msg = '数据在此';
      })
  },
  beforeRouteUpdate (to, from, next) {
    // 触发条件见下文
    // 能够访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 能够访问组件实例 `this`
  }
}

beforeRouteUpdate的触发条件(动态路由参数变化时)
- 1:路由配置
- ```
{path:"/xxx/:id"}
```
- 2:router-link
- ```
<router-link to="/xxx/1"
```
- ```
<router-link to="/xxx/2"
```

next
- 放行next();
- 取消本次导航（url恢复成点击前的）next(false)
- 重定向
  - ```
  next('/xxx')
  // 或者
  next({name:'路由对象的name属性'});
```
to||from
- 该对象中的.fullPath属性比较经常使用，也就是当前的url

守卫meta属性的应用

路由meta元数据 -> meta是对于路由规则是否须要验证权限的配置
- 路由对象中和name属性同级 { meta:{ isChecked:true } }
路由钩子 -> 权限控制的函数执行时期
- 每次路由匹配后, 渲染组件到router-view以前
- ```
router.beforeEach(function(to,from,next) {  
    // 判断to或from的fullPath便可
} )
```

编程导航

1: 跳到指定的锚点,并显示页面 this.$router.push({ name:'xxx',query:{id:1},params:{name:'abc'} });
2: 配置规则 {name:'xxx',path:'/xxx/:name'}
3: 根据历史记录.前进或后退
- this.$router.go(-1|1);
- 1表明进一步,-1是退一步

过渡效果及缓存

咱们须要在路由改变时变化页面，ok！同时咱们但愿加上一些淡入淡出等效果，就能够用上transition内置组件

另外,考虑到缓存问题，就加上keep-alive组件结合使用

所以，你看到是这样的

<transition>
  <keep-alive>
    <router-view></router-view>
  </keep-alive>
</transition>

transition及keep-alive详情参考