基于vue-cli的vue项目之路由5--router.push,go,replace方法

push方法：

想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。

当你点击 时，这个方法会在内部调用，所以说，点击 等同于调用 router.push(...)。

replace方法：跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。


go方法：

这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)。

例子

1.hello.vue：用来展示的vue子控件



2.foo.vue：用来展示的vue子控件



3.router/index.js:路由配置文件
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
	routes: [{
			name:"/hello:param1",
			path: '/hello:hparam1',
			component: require('../components/Hello.vue'),
		},
		{
			name: '/foo',
			path: '/foo/:fparam1/age:fparam2',
			component: require('../components/foo.vue')
		},
		{
			path: '*',
			redirect: '/hello:hparam1'
		},
	]
})
export default router;

4.app.vue:主界面
/*
push方法：
想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。
当你点击  时，这个方法会在内部调用，所以说，点击  等同于调用 router.push(...)。
replace方法：
跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。
go方法：
这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)。
*/




5.main.js:主文件，配置路由位置
import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
import router from './router'
Vue.use(VueRouter);
new Vue({
	el: '#app',
	router,
	render: h => h(App)
})

效果是这样的：