笔记整理:关于VUE插件--Vue Router篇

一、Vue Router介绍

Vue Router 是Vue.js官方的路由管理器。让构建单页面应用变得易如反掌

前端配置路由的优缺点:

优点:响应速度快 不需要经服务器
缺点:
      不利于SEO
      使用浏览器后退键会重新发送请求,没有合理利用缓存

二、开始使用

1.安装vue-router
# 进入项目安装并保存到依赖上
$ npm i vue-router -S
2.准备路由配置文件router/index.js
.
├── App.vue              //父组件
├── main.js              //入口文件  
├── components
│   └── kid1.vue         //子组件
├── router               //路由
│   └── `index.js`       //路由配置文件
└── assets
    └── logo.png
3.配置引用插件
  • (1) 编写router/index.js
    import引入插件;Vue.use使用插件;new Vuex.router 实例化一个Vuex对象;暴露出去

    //引入依赖
    import Vue from 'vue'
    import VueRouter from 'vue-router'
    
    //引入所有组件
    import Home from './views/Home.vue' 
    //使用插件
    Vue.use(VueRouter);
    
    //实例化 并暴露出去
    export default new VueRouter({
      mode:'history',//默认是hash模式。
      routes: [
        {
          path: "/",
          name: "Home", //可选
          component: Home //普通加载
        },
        {
          path: '/Foo',
          name: 'Foo',
          component: import('./Foo.vue') //路由懒加载 异步加载组件
        }, {
          path: '/admin/:userId', //配置动态路由
          name:'GoodsList',
          component: GoodsList,
          children:[//嵌套路由
            {
              path: 'detail',
              name:'detail',
              component: Detail
            }
          ]
        }
    
      ]
    })
    
  • (2) 入口文件引入仓库 main.js
    单页面应用程序中 在入口文件引用,其下子组件就全都能获取调用。

    import Vue from 'vue'
    import router from './router' // 引入仓库
    
    //引入各种组件
    import App from './App'
    
    new Vue({
      el: '#app',
      router, // 挂载仓库
      components: { App },
      template: `<App/>`
    })
  • (3) 使用路由

    # 实现跳转:
    1.标签式路由
        <router-link to="/foo" >Go to Foo</router-link> //渲染成`<a>` to内容要与路由配置的path匹配
        属性说明:
            to 目标路由 
            replace  变成replace模式,即不往history添加记录
            append   在to路径前添加基路径
            tag   渲染成什么标签如:<router-link to="/foo" tag="li">foo</router-link>  》渲染成 》<li>foo</li>
        
    -------------------------------------
    
    2.编程式路由
        vm.$router.push({path:""})
        vm.$router.replace()
        vm.$router.go()
        vm.$router.black()
        vm.$router.forward()
    
    # 路由视图:
    <router-view name=""></router-view>

三、动态路由的匹配

path配置 匹配路径 $router.params
/user/:username /user/evan {username:’evan'}
/user/:username/post/:post_id /user/evan/post/123 {username:’evan’;post_id:’123'}
/user/* user/1,user/2,userr/1/10 都能匹配 说明:通配符 (*)
/user-* user-a 说明:匹配以 /user- 开头的任意路径

四、嵌套路由

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id', component: User,
      children: [
        // 当 /user/:id 匹配成功,
        // UserHome 会被渲染在 User 的 <router-view> 中
        { path: '', component: UserHome },
        // ...其他子路由
      ]
    }
  ]
})

五、编程式导航

$router.push() 跳转 并向history 添加新记录
$router.push("name") //字符串

$router.push({path:"name”}) //object

$router.push({path:”name?a=123”}) //参数直接跟问号 

$router.push({path:"name",query:{nums:123,class:9} })  也可以分开卸载query里
$router.replace() 跳转 但不会向history 添加新记录
$router.replace(location, onComplete?, onAbort?)
这个和push很像  但是这个不会向 history 添加新记录
$router.go(n) 向前几页或向后几页
$router.go(n) 向前几页或向后几页
$router.back()
$router.forward()
$router.resolve() 新窗口打开
   let routeUrl = this.$router.resolve({
     path: "/share",
     query: {id:96}
   });
   window.open(routeUrl.href, '_blank');
$router.addRoutes 动态添加路由规则

例如:vue权限管理

六、命名路由和命名视图:

命名路由: 给路由定义不同的名字,根据名字进行匹配;
<router-link v-bind:to="{ name: 'Cart'}">Cart</router-link>   <!-- 和路由配置的name保持一致 —>

命名视图: 给不同的router-view定义名字,通过名字进行对应组件的渲染;
image.png

七、导航守卫

参数to:目标路由, from:原本路由, next执行回调
其中 确保要调用next方法,否则钩子就不会被 resolved

  • next() //进行管道中的下一个钩子
  • next(false) //中断当前的导航
  • next('/') 或者next({ path: '/' }) // 跳转到一个不同的地址
  • next(error) //导航会被终止且该错误会被传递给router.onError()
  • next(()=>{}) //自定义执行
全局守卫
const router = new VueRouter({ ... })
//全局守卫:进入to路由前执行
router.beforeEach((to, from, next) => {})

//全局解析守卫: 在导航被确认之前
router.beforeResolve((to, from, next) => {})
 
//全局后置钩子: 导航被确认执行,可以理解为导航完成时执行
router.afterEach((to, from) => {})
路由独享的守卫
const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {}
    }
  ]
})
组件内的守卫
const Foo = {
  template: `...`,
  
  // 进入该路由之前。因为当守卫执行前,组件实例还没被创建 不!能!获取组件实例 `this`
  beforeRouteEnter (to, from, next) {},
  
  // 在当前路由改变时 eg :在 /foo/1 和 /foo/2 之间跳转的时候 
  beforeRouteUpdate (to, from, next) {},
  
  // 离开该路由之前
  beforeRouteLeave (to, from, next) {}
}

八、其他

使用<transition>组件过渡动画
<!-- 使用动态的 transition name -->
<transition :name="transitionName">
  <router-view></router-view>
</transition>

watch监听$route变化

// 接着在父组件内
// watch $route 决定使用哪种过渡
watch: {
  '$route' (to, from) {
    const toDepth = to.path.split('/').length
    const fromDepth = from.path.split('/').length
    this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
  }
}
使用<keep-alive>缓存组件,不重新加载
  • include- 字符串或正则表达式。白名单
  • exclude- 字符串或正则表达式。黑名单
  • max- 数字。最多可以缓存多少组件实例。

参考资料:
官网: https://router.vuejs.org/zh/
路由守卫:https://blog.csdn.net/bingqis...
使用Vue-Router 2实现路由功能:https://blog.csdn.net/sinat_1...

阅读 340

推荐阅读
喈喱前端笔记
用户专栏

学习的付出 从不欺人

4 人关注
30 篇文章
专栏主页