vue 编程式跳转

叁歲伎倆 2021-07-24 14:40 644阅读 0赞

编程式导航,会返回一个Promise对象,包含当前导航的信息
    
    (1)this.$router.push：
    
    	(1)这个方法会向history栈添加一个新的记录
    	(2)点击 <router-link :to="..."> 等同于调用 router.push(...)。
    
    	1、配合事件使用
    		在方法中:
    			this.$router.push('路由路径?参数')
    				this.$route.query.参数名接收
    				
    			this.$router.push({ path: '路由路径', query: { plan: 'private' }},function(){成功回调},失败回调); query表示传递的参数			
    				this.$route.query.参数名接收
    				
    		第二种方法采用命令路由
    			this.$router.push({ name: '路由name值', params: { userId: '123' }},function(){成功回调},失败回调)
    				routes:[{
    					path:'...',
    					name:'指定名称',
    					...
    				}]
    				this.$route.params.参数名接收
    				
    		第三种,在js文件中,引入路由对象来使用
    			import router from '../router/index'
    			router.push('/xx')
    			
    	2、事件回调
    		this.$router.push(...,onComplete,onAbort)
    			onComplete:	在导航成功完成(在所有的异步钩子被解析之后)调用	
    			onAbort:	终止(导航到相同的路由、或在当前导航完成之前导航到另一个不同的路由)的时候进行相应的调用
    		
    (2)this.$router.replace:
    
    	(1)跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 
    	替换掉栈中的记录为当前记录
    	(2)切换路由不会向栈中添加重复路由
    		
    	使用方式和this.$router.push相同
    
    (3)this.$router.go:
    	(1)意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n,function(){成功回调},失败回调)
    	(2)参数是一个整数，意思是在 history 记录中向前或者后退多少步,-2表示回退两布,即当前页面的上上页面
    
    	this.$router.go(n);
    	
    (4)和window.history关系
    	router.push、router.replace和router.go跟window.history.pushState、window.history.replaceState和window.history.go效果相同
    
    (5)不同路由模式
    	导航方法(push、replace、go)在各类路由模式(history、hash和abstract)下表现一致。

代码示例:

<template>
      <div id="app">
        <img src="./assets/logo.png">
        <ul>
          <router-link to='/d/jeff'>d</router-link>
          <router-link to='/c'>c</router-link>
        </ul>
        
        //编程式导航
        <button @click='back'>点击跳转首页</button>
    
        <router-view />
      </div>
    </template>
    
    <script>
    import Vuedemo from './components/Vuedemo'
    import Vue1 from './components/Vuee'
    import A from './components/A'
    import B from './components/B'
    import D from './components/D'
    
    export default { 
      name: 'App',
      data()
      { 
        return{ 
          
        }
      },
      methods:{ 
        back()
        { 
          this.$router.go(-2)
        }
    
      },
      components: { 
        Vuedemo,
        Vue1,
        A,
        B,
        D
      }
    }
    </script>
    
    <style>
    #app { 
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>