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

vue学习笔记4——route

之前学习笔记补充:

注意渲染和其他标签的先后顺序

/**下面是新的内容了***/

疑问:

参照网易云音乐

进入ip为music.163.com的页面(网易云的官网)

点击一些功能按键,网页的头部和一些位置是没有变化的

按F12打开控制台之后,开一查看到每次切换的时候,里面有一个div中的

iframe在变换。

其余的就是地址栏上的路由在切换了

而且,在可库体验上没有明显的页面跳转时的刷新,那么就是单页应用咯

怎么看路由?

就是,网页的地址栏的第一个/ 后的名称就是,第一个路由名称咯,每个路由之间用 / 隔开

现阶段我会认为,是在最初的app.vue文件里,在渲染之前进行了内容的填充

vue学习笔记4——route,路由跳转等_第1张图片

app.vue中 渲染的就是在router中定义的文件

可以在最初的那个app.vue中的export default中添加

created: function () {
     
      this.$router.push('login')
    } //指向登陆页面

注意,这个是和data平级的,注意添加的位置

push中”里面的,是渲染的组件(页面)

vue学习笔记4——route,路由跳转等_第2张图片

我在此处做了一个路由切换的时候样式的改变,当路由为homePicture的时候添加class:changeStyle

在点击a标签的时候,路由的跳转

vue学习笔记4——route,路由跳转等_第3张图片

里面还有另一种方法,用函数监听路由变化,改变样式

注意:

使用的时候一定要注意却别 / 和 ./ 一个是根路径,一个当前根路径(./),目前我是这么理解的

我大概会在学习笔记底7篇的时候,加上一个我的github的演示链接和demo下载链接

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

你可能感兴趣的:(Vue,vue,vue-js,html,前端)