zoukankan      html  css  js  c++  java
  • Vue Router 学习笔记

    1.路由的基本使用

      HTML部分:

        <router-link to="链接到的组件地址">给个名字</router-link>   (router-link默认会被渲染成一个a标签)

        ---------------------------------------------------------------------

        <router-view></router-view>  (路由出口,链接到到的组件会被显示在这里)

      JavaScript部分:

        0)如果使用模块化机制编程,需要导入Vue和VueRouter,要调用Vue.user(VueRouter)

        1)引入或定义需要使用的组件

        2)定义路由 :

                        

        3)创建路由实例,设置配置参数

        4)创建和挂在到根实例

    2.动态路由

      1)定义路由时路径参数使用:,这样router-link  中的路径对应的内容会转化为参数,同时参数可以在被调用的组件中通过route.params  获得

      2)响应路由参数的变化:在 使用不同的router-link 调用组件时,组件有时需要监控路由参数的变化,但是由于调用的是同一个路由,所以组件会被复用,组件声明周期钩子不会不重新调用,可以使用watch 或者 beforeRouterUpdate  导航守卫来相应路由参数变化。 

      3)捕获所有路由或者404路由:*、 /user-*(以/user开头的所有路由),使用通配符是可以通过$.route.params 获取到一个名为pathMatch 的参数,包含被匹配到的部分。

      4)高级匹配模式:vue-router 使用path-to-regexp作为路径匹配引擎,所以有很多高级的匹配模式。

      5)匹配的优先级:优势一个路径可能匹配到多个路由,这是哪个路由先定义,就优先匹配到哪个路由。

    3.嵌套路由

      在父级<router-view>中设置相应子路由链接到的组件的显示出口<router-view>

      children:[]设置子路由配置信息

    4.编程式的路由 :router.push()、router.replace()、router.go()

    5.命名路由:路由可以使用name属性配置名称,相应的<router-link to = "{name:路由名称,params:{参数名称:参数值,...}}">

    6.命名视图:在一个页面有多个视图显示时,视图可以通过设置name属性,在路由components配置中设置相应的组件视图出口。

    7.重定向和别名:重定向:redirect:重定向路径

            别名:alias:别名

    8.通过路由给组件传参:为了减少路由和组件之间的耦合,路由中的参数可以通过在组件中设置props给组件传参

      1)布尔模式:props设为true :route.params 会被设置为组件属性

      2)对象模式:props为对象,安装对应的设置 设置属性

      3)函数模式:props可以为一个函数的返回值

    6.history模式:为了URL美观,一般使用history模式,使用这种模式时需要在后端做一个URL覆盖配置,如果URL匹配不到任何静态资源时返回app依赖的index.html页面。

     在Vue应用里面覆盖所有路由情况,添加一个覆盖所有路由的404页面。

  • 相关阅读:
    Matlab——m_map指南(4)——实例
    Python——matplotlib基础绘图函数示例
    Python——Matplotlib库入门
    Python——图像手绘效果
    MATLAB——nctoolbox安装及使用
    Python——NumPy库入门
    Failed to connect to github.com port 443: Timed out
    python 调用C++ DLL,传递int,char,char*,数组和多维数组
    python基础
    linux常用命令
  • 原文地址:https://www.cnblogs.com/lauzhishuai/p/10849702.html
Copyright © 2011-2022 走看看