vue 路由meta作用及在路由中添加props作用

vue路由meta:有利于我们处理seo的东西，我们在html中加入meta标签，就是有利于处理seo的东西，搜索引擎

在路由中传参是通过/：id传参代码如下：

import Login from '../components/views/login'
import Todo from '../components/views/todo'
import HelloWord from '../components/HelloWorld'

export default [
  {
  path: '/app/:id',
    name:'app'，
    meta:'',
  component: Todo,
    children:[{
    path:'test',
      component :Login
    }]
},
在路由中添加参数如下：

<template>
  <div id="app">
    <router-link to="/app/123">todo</router-link>
    <router-link :to="{name:'login'}">注册</router-link>
    <router-view/>
  </div>
</template>
这样传递的参数就是123，一般我们获取路由的参数是通过this.$routes.params来获取；
这里我们用一个新的方法通过在路由中添加props:true,这样就可以容易获取路由的参数，代码如下

export default [
  {
  path: '/app/:id',
    name:'app',
    props:true,//这里添加props属性并且设置为true
    meta:'',
  component: Todo,
    children:[{
    path:'test',
      component :Login
    }]
},
在组件中mouted生命周期函数里就能看到相应的id

<template>
<div>todo
  <router-view></router-view>
</div>
</template>

<script>
     export default {
          name: "todo",
       props:['id'],
       mounted () {

           console.log(this.$route.params.id);

            console.log(this.id)
       }

     }
</script>
尽量使用这种方法，不要使用this.$route.paramas,让组件和路由解耦尽量不要在组件中使用$routes,$router方法，当然也可以获取query中的参数例如给组件加代码如下

<template>
  <div id="app">
    <router-link to="/app/123?a=234&b=345">todo</router-link>
    <router-link :to="{name:'login'}">注册</router-link>
    <router-view/>
  </div>
</template>
路由设置如下：

export default [
  {
  path: '/app/:id',
    name:'app',
    props:(route) =>({id:route.query.b}),
    meta:'',
  component: Todo,
    children:[{
    path:'test',
      component :Login
    }]
},