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