近日学习vue，在做一个demo，期间遇到一个问题，如图-1所示，最终通过动态路由解决；
图-1
接下来说一下解决思路，由于刚接触不久，最开始想通过给tab项绑定点击事件，然后传入参数改变data里面的msg，虽然可以达到效果，但明显过于繁琐，后来打印了一下$route，发现路由是个对象，汗 - -！，问题得到解决，方法如下：
1.搭建vue-cli项目 （此处略过），搭建完后结构如图-2所示
图-2
2.创建3个组件，在components文件夹下分别创建index.vue news.vue profile.vue三个组件
3.在route文件夹下打开index.js对路由进行配置，配置如图-3所示（此步骤之前先在上面引入各组件）
图-3
4.打开App.vue组件，修改页面结构，如图-4所示，我们可以通过console.log打印一下$route对象，通过观察可以发现每一个路由对象都有一个name属性（也就是上一步配置路由时所设置的），由于我们要改变的是顶部h1标签里面的文字，因此我们通过差值表达式{{$route.name}}来显示不同路由所对应的文字。
图-4
结语：由于刚接触不久，表达不够清晰的地方还望各路大神指点。
demo 地址： https://github.com/jasonyu2016/vue-route-demo/tree/master
网友评论