zoukankan      html  css  js  c++  java
  • 关于Vue-router的补充和复习-----动态路由的匹配问题

    这里我只是设想实际开发中的过程,没有完全从零开始学习 这;

    1.template中

      

     2.要在router文件夹里的index.js文件中配置路由:

     3.要在main.js中,Vue实例中,加载路由对象(只做了这一次哈,因为index.js中已经把路由对象暴露出去了)

      路由对象的暴露:

      

       main.js中加载路由对象:

        《1》导入路由对象:

          

        《2》在Vue实例对象中挂载路由对象:

          

     ====================================================================================================================

    下面是动态路由的匹配:

      什么是动态路由匹配?

        我们经常需要把某种模式匹配到的所有路由,全部都映射到同一个组件中。例如newsinfo组件,对于所有id各不相同的新闻详情,都要使用这个组件来渲染。那么,我们可以在vue-router的路由

    路径中使用 ‘动态路径参数’来达到这个效果:

        

         当匹配到这个路由的时候,参数值会被设置到this.$router.params,可以在每个组件内使用。

        这里这个例子中,在NewsInfo组件中:

        

       

           1.响应路由参数的变化:

           当使用路由参数的时候,例如从 /newsinfo/13到 /newsinfo/14,原来的组件实例会被复用。因为这两个路由都是渲染的同一个组件newsinfo,比起销毁再创建,复用显得更加高效。不过,这也意味着组件的生命周期钩子不会再被调用。

          2.复用组件时,想要对路由参数的变化做出响应的话,可以使用watch检测$route路由参数对象的变化;

          

          当然还可以使导航守卫;

          

         3.捕获所有路由或404Not found 路由:

         常规参数只会匹配被 /  分隔的URL片段中的字符。如果想匹配任意路径,可以使用通配符(*);

        

     

     匹配优先级:

      有时候,同一个路径可以匹配多个路由;此时,匹配的优先级就按照路由的定义顺序:谁先定义,

    谁的优先级就最高

  • 相关阅读:
    微信支付系列(2)——jsapi支付源码解析
    微信支付系列(1)
    java创建文件和目录
    在线文档预览方案-office web apps
    必要的思考
    做WEB开发的时候,前端与后端我们应该要注意哪些细节,哪些容易出现的漏洞?
    使用MVVM框架时,如何处理在页面动态渲染完之后需要发生的事件呢?
    系统间通信(10)——RPC的基本概念
    系统间通信(9)——通信管理与RMI 下篇
    系统间通信(8)——通信管理与RMI 上篇
  • 原文地址:https://www.cnblogs.com/hou-yuan-zhen/p/11771932.html
Copyright © 2011-2022 走看看