常见路由跳转的几种方式

常见的路由跳转有以下四种:

1.  

/* 不带参数 */


// 更建议用name
// router-link链接中,带'/' 表示从根路径开始,不带 表示从当前路由开始


/* 带参 */
// 1. params传参

// 路由配置 用 path: "/home/:id" 或者 path: "/home:id"
// 配置path,刷新页面参数保留;不配置path,刷新页面后 参数会消失

// html 取参 $router.params.id
// script 取参 this.$router.params.id


// 2 query传参

// 路由可不配置

// html 取参 $router.query.id
// script 取参 this.$router.query.id

也可,如

常见路由跳转的几种方式_第1张图片

2. this.$router.push() 跳转到指定的url,并在history中添加记录(即,点击回退,会退回上一个页面)

/* 不传参 或 query传参 */
this.$router.push('/home')
this.$router.push({name:'home'})
this.$router.push({path:'/home'})

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



/* params传参 */
this.$router.push({name:'home', params: {id:'1'}})
this.$router.push({path:'/home', params: {id:'1'}})
//注: params传参只能用name
//配置path,刷新页面参数保留;不配置path,刷新参数消失


/* query和params的区别 */
// query类似于 get 请求,跳转后页面url会拼接参数,如?id=1。-->适用于 非重要的参数
// params 类似于post,不拼接参数,刷新页面后参数消失。--->适用于 安全性较高的参数,如密码

html中,如:

3. this.$router.replace() 跳转到指定的url, 但不会在history记录(即,点击回退 退回到上上个页)

4. this.$router.go(n) 向前或向后跳转 n 个页面,n可正可负。 

使用后三种 需要在

你可能感兴趣的:(vue学习,前端,javascript,开发语言)