• VUE—Router的常用知识点(简单介绍)


    VUE—Router的常用知识点(简单介绍)

    一、动态路由

    在routers(定义路由) 中path:'/user/:id',其中的id就是动态路由的标志。

    上面表达所有的/user/****路由都会映射到相同的路径上,也就是说会访问到同一个页面。

    二、嵌套路由

    简单的理解就是父子路由,一个普通的路由中写

    children:[
    {
    path:'',
    component:
    }
    ]
    

    三、路由跳转方式

    编程式路由

    router.push()

    单击

    <router-link :to="..."> 
    

    等同于 router.push(...)

    router.replace() : 刷新当前路由,与router.push很像,唯一不同就是,它不会向history添加新记录,而是自动替换掉当前的history记录。 等同于

    <router-link :to="" replace>
    

    router.go(n): 方法的的参数是一个整数,意思是在history记录中前进或者后退多少,类似于window.history.go(n)

    router.go(1) : 前进一步

    router.go(-1): 后退一步

    路由跳转的时候可以传递参数,两种传参方式

    编程式路由的传参方式
    命名路由 (params)

    router-push({ name:'名称', params:{参数名:参数值}})

    声明式路由导航:

    <router-link :to="{name:'',params:{参数名:参数值}}"></router-link>
    
    查询参数(query)

    router-push({path:’值‘, query:{参数名:参数值} })

    这里需要注意的是params中只能使用name,不能使用path,而query中,都可以使用。

    想要在另一个界面获取参数,可以使用: $route.params.参数名 来进行获取,参数查询的方式也是一样的。

    声明式路由写法如上

  • 相关阅读:
    随便写的,关于外部提交按钮
    thinkPHP--empey标签
    ramdajs库应用场景
    数组常用用法--map,filter,reduce
    接口签名
    四种常见的 POST 提交数据方式
    localhost、127.0.0.1和0.0.0.0和本机IP的区别
    ftp与sftp
    本地已有项目上传git
    github和gitlab比较
  • 原文地址:https://www.cnblogs.com/AFBF/p/14906170.html
Copyright © 2020-2023  润新知