2019-07-31 VUE 路由META作用及在路由中添加PR

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