vue-route学习心得

在编辑器上安装vue.js插件方便使用vue的快捷键

一：配置子页面

1.在父页面中写上：<router-view></router-view>

2.在index.js中引入父子页面组件，并配置路由

二：传参

1.通过router-link传参<router-link :to="{name:'hi1',params:{username:'JSPang',id:888}}">Hi页面1</router-link>

name为：跳转页面的name值（在index.js中配置的），params传递参数
在子页面中通过：{{$route.params.username}}即可获取参数。

2.通过router-link传参，在地址栏直接写参数
（1）在index.js中url中直接写参数名(可在参数名后面添加正则作为限制条件)

   或这样（正则限制id必须为数字）　　 path:'/params/:newsId(\\d+)/:newsTitle',　

（2）在需要传参的地方写参数

<router-link to="/params/123/mia is so great">params</router-link>

（3）接收参数页面调用参数
{{$route.params.newId}}

{{$route.params.newTitile}}

三：单页面多路由
1.在单页面上放：

<router-view/>
<router-view name="left"></router-view>

<router-view name="right"></router-view>
2.在index.js中引入组件，在components中写入

 坑：

1.

 

转载于:https://www.cnblogs.com/miaSlady/p/8074576.html