zoukankan      html  css  js  c++  java
  • Vue-cli中的跳转

    Vue-cli中的跳转

    一.页面中跳转指定网页

    写法一:

    <router-link :to="{name:'home'}"> 
    

    这里的name是在VUE路由里面的

    写法二:

    <router-link :to="{path:'/path'}"> 
    

    注意:router-link中链接如果是'/'开始就是从根路由开始,如果开始不带'/',则从当前路由开始。

    二.js中跳转

    push与replace用法一样,都是跳转到指定网页

    区别:

    • push会history栈中添加一个记录,点击后退会返回到上一个页面
    • replacehistory栈中不会有记录,点击返回会跳转到上上个页面
    this.$router.push('/path') 
    this.$router.push({name:'name'}) 
    this.$router.push({path:'/path'})
    

    三.返回

    向前或者向后跳转n个页面,n可为正整数或负整数

    this.$router.go(n)
    

    四.关于跳转传参

    页面

    <router-link :to="{name:'name', params: {id:1}}"> 
    // params传参数 (类似post)
    // 路由配置 path: "/path/:id" 或者 path: "/path:id" 
    // 不配置path ,第一次可请求,刷新页面id会消失
    // 配置path,刷新页面id会保留
        
    <router-link :to="{name:'name', query: {id:1}}"> 
     
    // query传参数 (类似get,url后面会显示参数)
    // 路由可不配置
     
    // html 取参  $route.query.id
    // script 取参  this.$route.query.id
    

    js中

    this.$router.push(或者replace)({name:'name',query: {id:'1'}}) //这里name和path都可以
    this.$router.push(或者replace)({name:'name',params: {id:'1'}})  // 只能用 name
     
    // 路由配置 path: "/path/:id" 或者 path: "/path:id" ,
    // 不配置path ,第一次可请求,刷新页面id会消失
    // 配置path,刷新页面id会保留
     
    // html 取参  $route.params.id
    // js 取参  this.$route.params.id
    
  • 相关阅读:
    古谚、评论与论断、名篇与名言
    重读《西游记》
    重读《西游记》
    命名之法 —— 时间、季节、地点
    命名之法 —— 时间、季节、地点
    文言的理解 —— 古时的称谓、别称、别名
    文言的理解 —— 古时的称谓、别称、别名
    Oracle GoldenGate for Oracle 11g to PostgreSQL 9.2.4 Configuration
    瀑布 敏捷 文档
    POJ 1325 ZOJ 1364 最小覆盖点集
  • 原文地址:https://www.cnblogs.com/pythonywy/p/11585641.html
Copyright © 2011-2022 走看看