Vue路由——编程式导航

编程式导航 - 基础使用

编程式导航是使用JS代码进行跳转
语法：

this.$router.push({
    path: "路由路径", // 都去 router/index.js定义
    name: "路由名"
    //path和name二选一
})

path方法也可以简写

this.$router.push({
    path: "路由路径"
})
//上面的也可以简写为：
this.$router.push('路由路径')

注意：如果使用name方法必须要在main.js里给路由取名

[
	{
    	path: "/find",
    	name: "Find",
    	component: Find
	}
]

编程式导航的跳转传参

语法 query / params 任选一个：

this.$router.push({
    path: "路由路径"
    name: "路由名",
    query: {
    	"参数名": 值
    }
    params: {
		"参数名": 值
    }
})
//可以简写为this.$router.push('/find?参数') 但是不推荐
// 对应路由接收   $route.params.参数名   取值
// 对应路由接收   $route.query.参数名    取值

**********注意：如果使用path方法的情况下使用params传参时params会被自动忽略，而是用name方法可以传参，切页面导航栏不会显示数据，但是该数据只会被传一次，如果刷新页面则数据不存在$route中，解决方法是可以使用本地存储等方法

	**所以推荐使用name+query方式传参**

额外注意：如果当前url上"hash值和?参数"与你要跳转到的"hash值和?参数"一致, 爆出冗余导航的问题, 不会跳转路由，需要配置解决报错。