5.vue跳转页面的方式

约定不等于承诺〃 2023-07-07 05:49 1阅读 0赞

#### 1.router-link ####

//不带参数，如果router-link中连接带'/'开始就是从根路由开始，如果不带'/'就是从当前路由开始
    <router-link :to="{name:'home'}">
    <router-link :to="{path:'home'}">  //用name和path都行
    
    //带参数
    <router-link :to="{name:'home' , params:{id:1} }"> 
    //params传参数，params类似post
    //路由配置 path:"/home/:id" 或者 path:"/home:id"  不配置path,第一次可请求，刷新页面id会消失，配置path，刷新页面id会保留
    
    //html 取参 $route.params.id
    //script 取参 this.$route.params.id
    
    <router-link :to="{name:'home' , query:{id:1} }">
    //query传参数（类似get,url后面会显示参数）
    //路由可不配置
    
    //html 取参 $route.query.id
    //script 取参 this.$route.query.id

#### 2.this.$router.push()函数里面调用 ####

//不带参数,以下三种都行
    this.$router.push('/home');
    this.$router.push(name:'home');
    this.$router.push(path:'home');
    
    2.query传参
    this.$router.push(name:'home',query:{ id:'1'});
    this.$router.push(name:'/home',query:{ id:'1'});
    
    //html取参 $route.query.id
    //script 取参 this.$route.query.id
    
    3.params传参
    this.$router.push({ name:'home',params:{ id:'1'}});//只能用name
    //路由配置 path:"/home/:id" 或者 path:"/home:id"
    //不配置path,第一次可以请求，刷新页面id会消失，配置path,刷新页面id会保留
    
    //html 取参 $route.params.id
    //script 取参 this.$route.params.id
    
    4.query和params区别
    query类似get，跳转页面后 url后面会拼接参数，类似?id=1,非重要性的可以这样穿，密码之类的还是用params
    params类似post,跳转页面后 url后面不会拼接参数，但是如果不配置路由刷新页面后id会消失

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

#### 4.this.$router.go(n) ####

this.$router.go(n);
    //向前或者向后跳转n个页面,n可为正整数或负整数

#### 5.区别 ####

this.$router.push  //跳转到指定的url路径，并向history栈中添加一个记录，点击回退后返回到上一个页面
    this.$router.replace  //跳转到指定的url路径，但是不会向history栈中添加记录，单击回退后返回的是上上页面
    this.$router.go(n) //向前或者向后跳转n个页面，n可为正整数或负整数

原创：https://blog.csdn.net/jiandan1127/article/details/86170336?utm\_source=distribute.pc\_relevant.none-task