vue跳转路由的方式（vue-路由带参跳转）

vue路由传参按照传参方式可划分为params传参和query传参； params传参分为在url中显示和影藏参数两种方式

通过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 路由配置 { 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

params(不显示传参)也可以分为声明式和编程式两种,与方式一不同的是通过name进行传参,实现跳转;

通过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 // 输出123

使用该方式传值时,需要在路由中提前配置好参数,不过不需要在使用":/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传参的方式会导致在刷新页面的时候,传递的值会丢失;

query传参(显示参数)也可分为声明式和编程式两种方式

通过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 // 输出 123

使用该方式传值的时候,需要路由提前配置好路由别名(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