vue学习笔记4——route
之前学习笔记补充:
注意渲染<router-view></router-view>
和其他标签的先后顺序
/**下面是新的内容了***/
疑问:
参照网易云音乐
进入ip为music.163.com的页面(网易云的官网)
点击一些功能按键,网页的头部和一些位置是没有变化的
按F12打开控制台之后,开一查看到每次切换的时候,里面有一个div中的
iframe在变换。
其余的就是地址栏上的路由在切换了
而且,在可库体验上没有明显的页面跳转时的刷新,那么就是单页应用咯
怎么看路由?
就是,网页的地址栏的第一个/ 后的名称就是,第一个路由名称咯,每个路由之间用 / 隔开
现阶段我会认为,是在最初的app.vue文件里,在渲染之前进行了内容的填充
app.vue中<router-view></router-view>
渲染的就是在router中定义的文件
可以在最初的那个app.vue中的export default中添加
created: function () {
this.$router.push('login')
} //指向登陆页面
注意,这个是和data平级的,注意添加的位置
push中”里面的,是渲染的组件(页面)
我在此处做了一个路由切换的时候样式的改变,当路由为homePicture的时候添加class:changeStyle
在点击a标签的时候,路由的跳转
里面还有另一种方法,用函数监听路由变化,改变样式
注意:
使用的时候一定要注意却别 / 和 ./ 一个是根路径,一个当前根路径(./),目前我是这么理解的
我大概会在学习笔记底7篇的时候,加上一个我的github的演示链接和demo下载链接
vue学习笔记,是根据网上的一些帖子,自己在学习过程中实际情况,总结而来。每个人在学习过程中和实际操作中是有明显的个体差异的。本文仅作参考使用。