vue-router参数传递的四种方法

vue-router参数传递

声明式导航和编程式导航router.push()都可以传参

router-link的传参方式主要有：

1 使用name传递参数，在router.js中增加name参数，对应的组件中使用$route.name来获取

routes: [{
    path: '/',
    name: 'Hello', //name也可以是一个对象，name: {parameter: 111, age: 'xxz'}
    component: Hello
}]

2 通过<route-link :to="{name: 'hi1', params: {username: 'jspang', id: '555' }}"></route-link>, 组件上使用 $route.params.username和$route.params.id来获取参数

routes: [
    {
        path: '/hi1',
        name: 'hi1',
        component: Hi1
    }
]

3 通过URL来传递参数，在配置文件中以冒号的方式设置参数

routes: [
    {
        path: '/params/:newsId/:newsTitle',
        component: Params
    }
]

然后在要传递的组件中Params.vue获取参数$route.params.newsId

route-link 的写法如下：

<route-link :to="/params/198/这是title">URL参数跳转</route-link>

4 使用path来匹配路由，通过query来传递参数

<route-link :to="{name: 'Query', query: {queryId: 'status'}}"> //这里的name也可以换成path形式
    route-link跳转
</route-link>

对应的路由配置：

{
    path: '/query',
    name: 'Query',
    component: Query
}

对应的组件获取参数的方法是：$route.query.queryId

总结一下路由传参的四种方法，分别是：

1. 路由配置中添加name属性，组件中使用$route.name来获取参数，<route-link to="/path"></route-link>, 不够灵活，参数需要在router.js中提前写好
2. 通过<route-link>标签中to来传参，<route-link :to="{name:'hi1', params: {username: 'jspang', id: 555}}">跳转至Hi页面</route-link>, 路由配置{path:'/hi1',name:'hi1',component:Hi1} name不可省略
3. 使用URL来传递参数，配置文件中用冒号的形式设置参数
   {path:'/params/:newsId/:newsTitle', component:Params },

<route-link to="/params/198/title">
	URL传参
</route-link>

4. 使用path来匹配路由，然后通过query来传递参数

<route-link :to="{name: 'Query', query: {queryId: '112'}}"></route-link>


{path: '/query', name: 'Query', component: Query}