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
    }]
},