vue---路由的使用详解

vue 路由的使用包含两种方式： 编程式 和 声明式

编程式有三种方案：

使用场景：点击父组件的 li 元素跳转到子组件，并携带参数，便于子组件获取数据。

路由的配置包含三个方面：name表示路径的别名，path用于指定跳转路径，component表示子组件，即跳转的页面，这里的子组件需要使用import导入后使用。一般路由的配置定义在index.js页面中。
同时在该配置中还包含了：children用于定义嵌套的路由，redirect用于重定向页面，通常用于给定默认页面。等等。

父组件中：

<li v-for="article in articles" @click="getDescribe(article.id)">

方案一：

	getDescribe(id) {
		//直接调用$router.push 实现携带参数的跳转
	     this.$router.push({
	   	   path: `/describe/${id}`,
		 })
	}

需要对应路由配置如下：

   {
     path: '/describe/:id',
     name: 'Describe',
     component: Describe
   }

子组件中获取参数的方式：

this.$route.params.id

方案二：

父组件中：通过路由属性中的name来确定匹配的路由，通过params来传递参数

 this.$router.push({
    name: 'Describe',
    params: {
      id: id
    }
  })

对应路由中的配置: 这里可以添加:/id 也可以不添加，添加数据会在url后面显示，不添加数据就不会显示

   {
     path: '/describe',
     name: 'Describe',
     component: Describe
   }

子组件中获取参数的方式：

this.$route.params.id

方案三：

父组件：使用path来匹配路由，然后通过query来传递参数，这种情况下 query 传递的参数会显示在url后面?id=？

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

对应的路由配置：

   {
     path: '/describe',
     name: 'Describe',
     component: Describe
   }

对应子组件获取参数的方式：

this.$route.query.id

总结：
js方法跳转路由：

    // 字符串
    router.push('home')
    // 对象
    router.push({ path: 'home' })
    // 命名的路由
    router.push({ name: 'user', params: { userId: 123 }})
    // 带查询参数，变成 /register?plan=private
    router.push({ path: 'register', query: { plan: 'private' }})

声明式有两种传值方式：

使用params方式传值：

 <router-link :to="`/menu2/subMenu3/${student.id}`">{{student.name}}</router-link>

路由中的配置：

{
      path:'/menu2',
      component:Menu2,
      children:[
        {
          path:'subMenu3/:id',
          component:SubMenu3
        }
      ]
    },

在组件中取值：

$route.params.id

使用query方式传值：

<router-link :to="`/menu2/subMenu3?id=${student.id}`">{{student.name}}</router-link>

路由中的配置，只需要去掉路径末尾的:id：

{
      path:'/menu2',
      component:Menu2,
      children:[
        {
          path:'subMenu3',
          component:SubMenu3
        }
      ]
    },

在组件中取值：

$route.query.id

注意：

如果所需要传递的值是一个对象
我们可以这样传值：

<li><router-link v-bind:to="{path:'/word/router2',query:{id:123}}">路由2</router-link></li>

其中的query可以添加多个参数，用逗号隔开，值123可以使用变量替换，其中的path也可以使用name进行替换，只需要在路由的配置中对应就行

路由中配置如下：

   {
     path: '/word/router2',
     name: 'router2',
     component: router2
   }

子组件取值方式：

this.$route.query

这里的取值包含了传递的整个对象，也可以在该对象后面继续添加属性，如this.$route.query.id从而获取该对象的某个属性值。