Vue: 声明式导航（router-link）的跳转传参的两种方式

声明式导航-跳转传参

---

只要提到了声明式导航，就得想到（router-link）

---

1. 查询参数传参

语法：

1. to="path?参数名=值"
2. 对应页面组件接收传递过来的值： $route.query.参数名

---

代码示例：

1. 在路由跳转的时候进行传值   
<router-link to="/search?key=注重过程">注重过程</router-link>
      <router-link to="/search?key=不要急躁">不要急躁</router-link>
      <router-link to="/search?key=怎么学习好Vue呢">怎么学习好Vue呢</router-link>

2. 对应页面组件接收传递过来的值： 
 <p>搜索关键字: {{$route.query.key}} </p>

发请求的时候一定要使用this （获取路由传递过来的参数）
  created () {
    // 在created中，获取路由参数
    // this.$route.query.参数名   获取
    console.log(this.$route.query.key)
  }

---

2. 动态路由传参

① 配置动态路由：

const router = new VueRouter({
    routes: [
        ...,
        {
        	path: 'search/:words',
        	component: Search
        }
    ]
})

②配置导航链接: to="/path/参数名"

      <router-link to="/search/注重过程">注重过程</router-link>
      <router-link to="/search/不要急躁">不要急躁</router-link>
      <router-link to="/search/怎么学习好Vue呢">怎么学习好Vue呢</router-link>

③对应页面组件接收传递过来的值：$route.params.参数名

    <p>搜索关键字: {{$route.params.words}} </p>


  created () {
    // 在created中，获取路由参数
    // this.$route.query.参数名   获取查询参数
    // this $route.params.参数名  获取动态路由参数
    console.log(this.$route.params.words)
  }

---

两种传参的区别

1. 查询参数传参（比较适合传多个参数）
   • ① 跳转： to=“/path?参数名=值&参数名2=值”
   • ② 获取：$route.query.参数名

---

2. 动态路由传参（优雅简洁，传单个参数比较方便）

• ① 配置动态路由： path：“path/:参数名”
• ② 跳转：to=“/path/参数值”
• ③ 获取：$route.params.参数名

---

动态路由参数可选符

---

问题：我们再配了路由 path: “/search/:words” 为什么会匹配不到组件呢，显示空白？

---

原因：/search/:words 表示，必须要传参数。如果不传递参数，由于是动态的传参，所以还是会进行匹配，可以加个可选符号?

---

const router = new VueRouter({
    routes: [
        ...,
        {
        //在参数名后面添加一个？即可解决跳转空白
        	path: 'search/:words?',
        	component: Search
        }
    ]
})