Vue路由跳转的五种方式

Vue路由跳转的五种方式

Vue路由跳转的五种方式_第1张图片

目录

  • Vue路由跳转的五种方式
      • 1. router-link
      • 2. this.$router.push()
      • 3. this.$router.replace() (用法同push)
      • 4. this.$router.go(n)
      • 5. location
      • 扩展
        • this.$ router.push()和 this.$ router.replace()的区别
        • params和query的区别

路由跳转有两种形式:声明式导航、编程式导航

1. router-link

  1. 声明式
  2. prop=> :to=“…”
  3. 相当与 router.push(…)

router-link中链接如果是’ / '开始,就是从根路由开始
如果开始不带 ’ / ',则是从当前路由开始
例子

<template>
  <div>
    router-link 第一种方式
    <router-link :to="{name:'home'}">  
    <router-link :to="{path:'/home'}"> 
    name,path都行, 建议用name 
     <router-link :to"{
              name:'page1',
              query:{key:'我是传递的参数'}
    }">
    传递参数
    router-link>
  div>
template>

2. this.$router.push()

  1. 可追溯
  2. 编程式
  3. router.push(…)//该方法的参数可以是一个字符串路径,或者一个描述地址的对象。
  4. 会向history栈添加新纪录
  5. 方式
    • name
      • route-name
      • params
      //params传参
      1.路由配置:
       name: 'home',
       path: '/home/:id'(或者path: '/home:id')
       2.跳转:
       this.$router.push({name:'home',params: {id:'1'}})
       注意:
       // 只能用 name匹配路由不能用path
       // params传参数(类似post)  路由配置 path: "/home/:id" 或者 path: "/home:id"否则刷新参数消失
      
    • path
      • router-path
      • query
      //不带参数
       this.$router.push('/home')
       this.$router.push({name:'home'})
       this.$router.push({path:'/home'})
      //query传参
      1.路由配置:
       name: 'home',
       path: '/home'
       2.跳转:
       this.$router.push({name:'home',query: {id:'1'}})
       this.$router.push({path:'/home',query: {id:'1'}})
       3.获取参数
       html取参: $route.query.id
       script取参: this.$route.query.id
      
      //直接通过path传参
      1.路由配置:
      name: 'home',
      path: '/home/:id'
      2.跳转:
      this.$router.push({path:'/home/123'}) 
      或者:
      this.$router.push('/home/123') 
      3.获取参数:
      this.$route.params.id
      

例子

<template>
  <div>
    <vant-button @click='gotoFn1' type="defaullt">
      push第二种方式
    <van-button>
  div>
template>

export default{
  name:'page',
  data(){
  
  },
  methods:{
   gotoFn1(){
      this.$router.push({
        path:'/page',
        query:{key:'我是传递的参数'}
      })
      //push第二种路由跳转方法
    }
  }
  
}

3. this.$router.replace() (用法同push)

  1. 不可追溯
  2. 它不会向history添加新纪录
  3. 方式
    • name
      • route-name
      • params
        • 例如
            this.$route.push({
                name:' Home',//路由的名称
                params:{
                    site:[],
                    bu:[]
                  }
              })
        
        • 解释
        params:/router1/:site/:bu
        //这里的site、bu叫做params
        
    • path
      • router-path
      • query
        • 例如
        this.$router.push({
           path:'/home',
           query:{
            site:[],
            bu:[]
            }
        })
        
        -解释
        query:/router1?id=123
        这里的id叫做query
        

例子

<template>
  <div>
    <vant-button @click='gotoFn2' type="defaullt">
      replace第三种方式
    <van-button>
  div>
template>

export default{
  name:'page',
  data(){
  
  },
  methods:{
   gotoFn1(){
      this.$router.replace({
        path:'/page',
        query:{key:'我是传递的参数'}
      })
      //replace第三种路由跳转方法
    }
  }
  
}

4. this.$router.go(n)

  1. 相当于当前页面向前或向后跳转多少个页面,类似window.history.go(n)m可以为正数可为负数
  2. $router.go(-1)

例子

<template>
  <div>
    <vant-button @click='goBack' type="defaullt">
      第四种方式
    <van-button>
  div>
template>

export default{
  name:'page',
  data(){
  
  },
  methods:{
   goBack(){
      this.$router.go(-1)
       //go第四种路由跳转方法
    }
  }
  
}

5. location

  1. Location对象包含有关当前URL的信息
  2. href
    • 设置或返回完整的URL。
    • readable可读
      const url=location.href
      
    • writeable
     location.href='https://www.baidu.com'
    
  3. 刷新页面

可以用 window.location来访问


扩展

Vue路由跳转的五种方式_第2张图片

this.$ router.push()和 this.$ router.replace()的区别

this.$router.push()跳转到指定url路径,并向history栈中添加一个记录,点击后退会返回上一个页面

this.$ router.replace()跳转到指定url路径,但是history栈中不会有记录,所以点击返回按钮时,会直接用【上一个页面之前的那个页面】来替换当前的页面

params和query的区别

query类似 get,跳转之后页面 url后面会拼接参数,类似?id=1。
非重要性的可以这样传,密码之类还是用params,刷新页面id还在。
params类似 post,跳转之后页面 url后面不会拼接参数。
总结:
1.query可以用name和path匹配路由,通过this.$route.query.id获取参数,刷新浏览器参数不会丢失
2.params只能用name匹配路由,通过path匹配路由获取不到参数,对应的路由配置path:‘/home/:id’或者path:‘home:id’,否则刷新浏览器参数丢失
3.直接通过url传参,push({path: ‘/home/123’})或者push(’/home/123’),对应的路由配置path:‘/home/:id’,刷新浏览器参数不会丢失。

你可能感兴趣的:(前端框架知识,前端知识,vue.js,javascript,前端)