vue-router动态路由匹配-vue起步之每天一点vue~

    选择打赏方式

npm安装模板时这里问你是否安装路由

 Install vue-router?

UC截图20181218194142.jpg

选y回车,安装完毕后目录里是直接有个router文件夹的,路由的信息都在这里面的index.js文件里面

原来的路由配置是这样的

子成君截图20181218195317.jpg

动态路由,即要实现点击跳转到不同地址的组件

实现的跳转效果是这样的,这张gif图是网上找的..将就用一下

一共三个步骤:

1.创建新的子组件

2.引入子组件

3.在router文件夹里的index.js文件内,继续配置router信息就可以了

在图上我已经标记出来了

UC截图20181218200748.jpg

可以看出path: '/'就是根目录下的组件,默认是Hello,新创建的两个子组件ComponentA和ComponentB我给了/aaa和/bbb的路径

为了效果再给他们加上内容,这里要注意name是唯一的

QQ截图20181218200805.jpg

然后在App.vue里使用

子成君QQ截图20181218201304.jpg

然后回到控制台npm run dev 看看效果吧

最后还是找了个gif制作工具做了张动图....

vue.gif

动态路由配置,就到这吧。

版权声明:若无特殊注明,本文皆为《 子成君 》原创,转载请保留文章出处。
本文链接:vue-router动态路由匹配-vue起步之每天一点vue~ https://www.zcjun.com/learn/305.html
百度收录:本文已被百度收录点击查看详情!
本文到此结束

热门推荐

发表吐槽

你肿么看?

你还可以输入 250 / 250 个字

爱你允悲悲伤吃惊委屈可怜憧憬吃瓜大哭开心坏笑笑哭哼打哈欠鼓掌乖嘘阴险日了狗费解挤眼滑稽666比心


既然没有吐槽,那就赶紧抢沙发吧!