Vue 路由跳转、返回某一页方式

版权声明：无需声明 https://blog.csdn.net/Sun_Shydeo/article/details/89282373

1、映射路由 <router-link> 标签  to属性

<!-- path跳转 -->
<router-link to="/home"> Home </router-link>

index.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/home'

Vue.use(Router)

export default new Router({
 mode: 'history',
  routes: [{
      path: '/home',
      name: 'Home',
      component: Home
    }
  ]
})

2、编程式导航

2.1、this.$router.push()

特点：跳转到不同的url，同时向history栈添加 一个记录（当前组件path），点击返回时返回上一页

（1）字符串

this.$router.push('/home');

（2） 对象 path 属性，query属性传参数

this.$router.push({path:'/home', query:{pid:1});

特点：参数会在浏览器路径中显示，类似 get 请求

获取参数：

this.$route.query.pid

（3） 命名路由 name 属性，params属性传参数

this.$router.push({name:'home', params:{pid:1});

特点：参数会在浏览器路径中显示，类似 get 请求

参数获取：

this.$route.params.pid

2.2、this.$router.replace()

特点：作用同  push，不同的是 跳转时不会向 history栈添加 当前页 记录，无法回退

this.$router.replace({name:'home', params:{pid:1})

this.$router.replace({path:'/home', query:{pid:1})

2.3、this.$router.go(n)

特点：作用类似 window.history.go(n)，从当前记录 在history栈中 向前(n > 0)查找或向后(n < 0)查找，若存在记录则跳转到该页面

this.$router.go(2)

this.$router.go(-1)

2.4、this.$router.back(n)

特点：作用回退功能，回退时判断有没有上一个路由，并跳转到该页面

this.$router.back(-1);    //返回上一页