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')

 }