Vue学习----第五天_Vue-Router（初步了解vue路由）【6.10】

一、认识路由

1、什么是路由

2、什么前端渲染和后端渲染

后端渲染：后端处理URL和页面之间的映射关系
直接把服务器渲染好的页面返回给前端

前端渲染：浏览器中显示的网页中大部分内容都是前端写的js代码在浏览器中执行，最终渲染出来的网页

3、后端路由阶段

4、前端路由阶段

二、前端路由的规则

实现，路径改变，页面不刷新

1、URL的hash

2、HTML5的history模式

01.HTML5的history模式：pushState

浏览器可以实现后退前进

02.HTML5的history模式：replaceState

浏览器不会实现后退前进

03.HTML5的history模式：go

三、Vue-router基础

1.认识vue-router

官网：https://router.vuejs.org/zh/

2.安装和使用vue-router

01.使用路由步骤

①.创建router实例

②. 挂载到vue实例中

③. 创建路由组件

④. 配置组件和路径的映射关系

⑤. 使用路由

⑥. 最终效果

四、细节处理

1.路由的默认路径

使用redirect来实现路由重定向

2.HTML中的history模式

mode：'history'

3.router-link补充

go：前往对应的组件
tag：指定touter-link渲染成什么样组件，默认为a
repalce：不留下history记录，无法返回到上一页面
active-class：修改样式属性

4.修改linkActiveClass

5.路由代码跳转

this.$router.push()
this.$router.replace()

6.动态路由

运用$route.params.id

五、路由懒加载

打包文件夹解析：

1.认识路由懒加载

2.路由懒加载的效果

3.路由懒加载的方式

路由懒加载语法：
方式一：component: () => import(‘组件地址')
方式二：先定义const 组件名 = () => import('组件地址')然后在component里面引入组件名

六、路由嵌套

1.认识嵌套路由

2.嵌套路由实现

3.嵌套默认路径

七、传递参数

1.传递参数的形式

// params方式
<router-link :to="'/user/' + userId">用户</router-link>
// query方式
<router-link :to="{ path: '/profile', query: { name: 'lvan', age: 18} }">档案</router-link>

2.传递参数方式一：< router-link >中query

3.传递参数方式二：JavaScript中query

4.获取参数

$route.params
$route.query

5.$router和 $route是有区别的

八、导航守卫

官网：https://router.vuejs.org/zh/

1.为什么使用导航守卫

2.导航守卫的使用

使用router.beforeEach((to, from, next) => {})

3.导航守卫补充

官网：https://router.vuejs.org/zh/

九、keep-alive

1.返回组件保持原来状态

如图返回页面，组件还依旧保持在消息一栏

实现：
01.使用keep-alive把router-view包裹起来

<keep-alive>
  <router-view></router-view>
</keep-alive>

02.在组件中，设置当前组件活跃状态时、组件内守卫

<script>
export default {
  data() {
    return {
      path: '/home/news'
    }
  },
  // 活跃状态，deactivated失活，两个函数只有在该组件被保持状态使用了keep-alive时，才有效
  activated() {
    this.$router.push(this.path)
  },
  // 组件内守卫，用path属性记录离开时的路径
  beforeRouteLeave(to, from, next) {
    console.log(this.$route.path)
    this.path = this.$route.path
    next()
  }
}
</script>

2.keep-alive遇见vue-router

如果要排除两个或 以上：<keep-alive exclude="Profile,User">
只有保持keep-alive状态下，deactivated组件失活、activeted组件活跃。才有效果

内容持续更新中…
学习自：b站ilovecoding
lvan学习笔记-文章内容仅个人观点
2020.6.10