params 参数
{
path:'/index',
// 重定向到指定的路由
redirect:'/'
},
{
// 注意：这里的路由需要传一个参数，路由可以传多个参数
path:'/city/:id',
// 设置该选项为true，组件可以通过props选项接收路由参数
props:true,
component:City },
// *号，表示匹配不上的所有路由
{
path:' * ',
component:Error404
}
1.props传参
我们可以单独在components文件夹中创建一个路由组件，如下图，并将css样式及文本内容移至该组件文件中，在App.vue中导入并注册，然后在template中引入组件，如下图所示。
这样App.vue中就会比较干净。
------------------------------------------------------------------------------------------------------------------------
如果我们想打开页面显示首页就需要引入重定向，在routes中单独配置一个新的对象，path路径为空，redirect为/home
如果输入的网页路径为未配置的路径，此时我们想要显示404页面，则在routes中配置一个新的对象Error404.vue，如下图 ，此处的 * 为未配置的所有路由地址，并将其注册，引入。
如果在显示404页面后，我们想要点击图片返回首页，则给图片写一个click函数，如下图
如果多个router-link都是跳转到同一个页面，但是每个router-link所在的页面的数据不相同，此时就需要给路由传参，如下图
然后在跳转的路由页面中的created生命周期函数中使用params参数来接收传的参数。
但是该方法存在一个问题，如上图所示，如果在南京，镇江，无锡，苏州之间切换，页面不会跳转，因为这四个router-link都指向type路由页，因此需要给创建type路由页面时的信息里添加一个属性 props
其次在type路由页面中添加props用于接受传的参数。
并在type路由页面中开启监听，监听id的变化。
created(){
// $route返回的是当前路由信息，它身上有一个params属性，该属性里面保存的是当前路由信息的参数。
// console.log(this.$route);
// console.log(this.$route.params.id);
// 从路由参数中获取城市编号
// let cityId = this.$route.params.id
// 再根据城市编号，获取对应的城市信息
// this.city = this.citys.find(c=>c.id==cityId)this.city=this.citys.find(c=>c.id==this.id)
},
2.query传参
// 使用props选项接收路由参数props:["id"],
<!-- 路由地址，采用query传参方式：?参数1=XXX&参数2=XXX... -->
<li @click="$router.push(`/type?id=${item.id}`)" v-for="(item,index) in types" :key="index">{{item.name}}</li>
3.router 和router和route
// $router返回的是当前项目中的路由器对象
// $route返回的是当前路由信息
// 判断当前路由信息，不是/news，添加到/news
if(this.$route.path!='/news'){
this.$router.push('/news')
}
