第一种传递参数:name传参
两步完成name传参并显示在模板中;
第一在router/index.js中配置name属性,
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
]
第二步在src/App.vue接收
{ { $route.name }}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
第二种参数传递方式 通过标签中的to传递
首先在src/App.vue中添加
hello
然后在router/index.js中添加name
{
path: '/hello',
name: 'hello',
component: hello,
alias: '/dongtian' //别名
},
最后在hello.vue页面接收
{ { $route.params.userName}}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
第三种 利用rul传递参数
首先在router/index.js路由中以冒号的形式传递参数,配置路由如下
{
path: '/params/:Id(\\d+)/:title', //只能是数字