vue学习笔记4——route，路由跳转等

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学习笔记，是根据网上的一些帖子，自己在学习过程中实际情况，总结而来。每个人在学习过程中和实际操作中是有明显的个体差异的。本文仅作参考使用。