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