Vue学习第八天

Vue08

一.

什么是前端渲染？什么是后端渲染？

1.后端渲染 jsp：java server page

2.后端路由 后端处理URL和页面之间的映射关系

转存失败重新上传取消

转存失败重新上传取消

转存失败重新上传取消

3.前端渲染

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

4.前端路由

转存失败重新上传取消

HTML5的history模式：pushState

转存失败重新上传取消

HTML5的history模式：replaceState

转存失败重新上传取消

HTML5的history模式：go

转存失败重新上传取消

二.

vue-router使用步骤

1.在components文件夹创建组件文件,配置路由组件

2.在router文件夹的index.js配置路由映射

{

path: "/home",

component: home

},

{

path: "/about",

component: about

}

3.在App.vue使用路由

<router-link>和<router-view>

<template>

<div id="app">

<router-link to="home">首页</router-link>

<router-link to="about">关于</router-link>

<router-view></router-view>

</div>

</template>

转存失败重新上传取消->转存失败重新上传取消->转存失败重新上传取消

http://localhost:8080/#/-> http://localhost:8080/#/home-> http://localhost:8080/#/about

转存失败重新上传取消

4.路由的默认路径

{

path: "/",

redirect: "/home"

},

5.取消hash模式

mode: "history"

6.router-link

转存失败重新上传取消

转存失败重新上传取消

转存失败重新上传取消

7.动态路由

转存失败重新上传取消

三.

路由懒加载

转存失败重新上传取消

转存失败重新上传取消

转存失败重新上传取消

四.

嵌套路由实现

1.定义两个组件

2.导入两个文件，实现懒加载

const HomeNews = () => import("../components/HomeNews");

const HomeMessage = () => import("../components/HomeMessage")

在路由Home中添加这两个子路由，设置默认路径

{

path: "/home",

component: Home,

children: [

{

path: "",

redirect: "news"

},

{

path: "news",

component: HomeNews

},

{

path: "message",

component: HomeMessage

}

]

},

3.在Home.vue中添加<router-link>和<router-view>

五.

传递参数的方式

转存失败重新上传取消

六.

转存失败重新上传取消

七.

导航守卫

可以在给各个组件添加meta属性，然后index.js调用router的beforeEach方法。

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

document.title = to.matched[0].meta.title;

next()

})

next()不能省略，否则不会继续执行。

meta:{

title: "首页"

},

八.

keep-alive

转存失败重新上传取消