2019-07-31 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
}]
},
在路由中添加参数如下：

这样传递的参数就是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

尽量使用这种方法，不要使用this.routes,$router方法，当然也可以获取query中的参数例如给组件加代码如下

路由设置如下：
export default [
{
path: '/app/:id',
name:'app',

    props:(route) =>({id:route.query.b}),

meta:'',

component: Todo,
children:[{
path:'test',
component :Login
}]
},