Vue动态路由及路由传参

目录

1.什么是动态路由？

2.适用于什么场景

3.路由传参

4.捕获所有路由

---

1.什么是动态路由？

  动态路由是指路由器能够自动地建立自己的路由表，并且能够根据实际情况的变化适时地进行调整。

2.适用于什么场景

  什么时候该用到动态路由呢？举个栗子，比如在写商品详情页面的时候，页面结构都一样，只是商品id的不同，这个时候我们就要使用动态路由了。毕竟动态路由可以传参，商品详情页大体都是一样的，无非就是商品图片价格等有点不同，这时传个商品id不就得了嘛，其他的数据就可以根据id渲染上去了。话不多说，举个实例。

3.路由传参

要想使用路由组件，首先要配置路由（默认在router文件夹下的index.js）,一般有两种方法：

（1)name和params

{
    path: '/my/:name',
    name: 'My',
    component: () => import(/* webpackChunkName: "about" */ '../views/My.vue')
  }

之后在App.vue中配置

<router-link :to="{name:'My',params:{name:1}}">My1</router-link>
<router-view/>  //这个不能忘记了

(2)path和query

  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')}

还要在App.vue中配置：

<router-link :to="{path:'about',query:{id:11111}}">About</router-link>

配置后即可访问的是同一个页面

4.捕获所有路由

  常规参数只会匹配被 / 分隔的 URL 片段中的字符。如果想匹配任意路径，我们可以使用通配符 (*)：

{
  // 会匹配所有路径
  path: '*'
}
{
  // 会匹配以 `/user-` 开头的任意路径
  path: '/user-*'
}

当使用通配符路由时，含有通配符的路由应该放在最后。路由 { path: '*' } 通常用于客户端 404 错误。简单的例子：

//配置文件  
{
	  path:'*',
	  name:'Error',
	  component:()=> import('../views/Error.vue')
  }

//模板
<template>
	<div class="error">
		<h1>404,你的页面跑丢了~</h1>
	</div>
</template>

 这样，当访问的url不在配置的路由表中就会出现写好的404Error页面