vue路由跳转的三种方式及区别（vue-路由带参跳转）
vue路由跳转的三种方式及区别（vue-路由带参跳转）// 1 路由配置 { path: 'content' name: 'Content' component: Content } // 2 js实现路由跳转 this.$router.push({ name: 'Content' params: { id: 123 } }) // 3 参数获取 this.$route.params.id // 显示undefined注意: 上述这种利用params不显示url传参的方式会导致在刷新页面的时候 传递的值会丢失; // 1 路由配置 { path: 'content' name
vue路由传参按照传参方式可划分为params传参和query传参； params传参分为在url中显示和影藏参数两种方式
1 params传参（url地址栏显示参数）1.1 声明式 router-link通过router-link的to属性实现，该方法的参数可以是一个字符串；使用该方式时，需要子路由中提前配置好参数，如：
// 1 路由配置
{
path: 'content/:id'
name: 'Content'
component: Content
}
// 2 页面跳转
<router-link :to="'content/123'">进入</router-link>
// 3 获取方式
this.$route.params.id // 输出123
1.2 编程式 this.$router.push
使用该方式传参时，需要在路由中提前配置好参数， 如：
// 1 路由配置
{
path: 'content/:id'
name: 'Content'
component: Content
}
// 2 页面触发js事件
linkTo() {
// 此处参数456可以通过动态变量替换
this.$router.push('content/456') ;
// 或
this.$router.push({path: 'content/456'}) ;
}
// 3 参数获取方式
this.$route.params.id // 输出456
url地址栏展示:
params传参url展示参数.png
2 params传参(url地址栏不显示参数)params(不显示传参)也可以分为声明式和编程式两种 与方式一不同的是通过name进行传参 实现跳转;
2.1 声明式router-link通过router-link组件的to属性实现
// 1 路由配置
{
path: 'content'
name: 'Content'
component: Content
}
// 2 页面跳转
<router-link :to="{name: 'Content' params: {id: 123}}">进入</router-link>
// 3 参数获取
this.$route.params.id // 输出1232.2 编程式this.$router.push
使用该方式传值时 需要在路由中提前配置好参数 不过不需要在使用":/id"等类似方式传递参数 具体如下:
// 1 路由配置
{
path: 'content'
name: 'Content'
component: Content
}
// 2 js实现路由跳转
this.$router.push({
name: 'Content'
params: {
id: 123
}
})
// 3 参数获取
this.$route.params.id // 显示undefined
注意: 上述这种利用params不显示url传参的方式会导致在刷新页面的时候 传递的值会丢失;
3 query传参(显示参数)query传参(显示参数)也可分为声明式和编程式两种方式
3.1 声明式 router-link通过router-link组件的to属性实现 不过该方式传值的时候 需要子路由提前配置好路由别名(name属性) 如
// 1 路由配置
{
path: 'content'
name: 'Content'
component: Content
}
// 2 页面设置
<router-link :to="{name: 'Content' query: {id: 123}}">进入</router-link>
// 3 参数获取
this.$route.query.id // 输出 1233.2 编程式 this.$router.push
使用该方式传值的时候 需要路由提前配置好路由别名(name属性) 如:
// 1 路由配置
{
path: 'content'
name: 'Content'
component: Content
}
// 2 js跳转
this.$router.push({
name: 'Content'
query: {
id: 123
}
})
// 3 参数获取
this.$route.query.id // 输出123
url地址栏展示:
query方式url展示.png
