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.$route.paramas,让组件和路由解耦尽量不要在组件中使用$routes,$router方法，当然也可以获取query中的参数例如给组件加代码如下

路由设置如下：

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

转载于:https://www.cnblogs.com/zhx119/p/10149215.html