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); //返回上一页