vue-router小记

// 字符串
router.push('home')

// 对象
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})

// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

注意：如果提供了 path，params 会被忽略，上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法，你需要提供路由的 name 或手写完整的带有参数的 path：

const userId = '123'
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123

　　this.$router.push({ path: "/detail" ,query:{val:val}});

// 这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

<!-- 字符串 --> <router-link to="home">Home</router-link> <!-- 渲染结果 --> <a href="home">Home</a>   <!-- 使用 v-bind 的 JS 表达式 --> <router-link v-bind:to="'home'">Home</router-link>   <!-- 不写 v-bind 也可以，就像绑定别的属性一样 --> <router-link :to="'home'">Home</router-link>   <!-- 同上 --> <router-link :to="{ path: 'home' }">Home</router-link>   <!-- 命名的路由 --> <router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>   <!-- 带查询参数，下面的结果为 /register?plan=private --> <router-link :to="{ path: 'register', query: { plan: 'private' }}"   >Register</router-link >

　　

 

命名路由的使用, 在router-link 中to 属性就可以使用对象了, 

 <router-link to="/user/123">User123</router-link> // 和下面等价 

 <router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>   // 当使用对象作为路由的时候，to前面要加一个冒号,表示绑定

//页面间传值
this.$router.push({ name: 'About', params: { userId:'传的值' }})　　　//  params: 刷新后值消失了

this.$router.push({ name: 'About', query: { userId:'传的值' }})     // query: 带查询参数，变成 /register?plan=private   (地址栏后会带参数，刷新后值还在)

this.$router.push({ path: '/about', query: { userId:'传的值' }})

this.$router.push({ path: '/about', params: { userId:'传的值' }})   // 写法错误，取不到值

//取值

　　

　　console.log(this.$route.query.userId);

   console.log(this.$route.params.userId);