691VueRouter4：URL的hash，H5的History，路由使⽤步骤，rout。。。
认识前端路由
后端路由阶段
前后端分离阶段
URL的hash
hash-demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<a href="#/home">home</a>
<a href="#/about">about</a>
<div class="content">Default</div>
</div>
<script>
const contentEl = document.querySelector('.content');
/
/ 【hashchange是window的⽅法，不是document的，写document.addEventListener不能监听hash的变化。】    window.addEventListener("hashchange", () => {
switch (location.hash) {
case "#/home":
contentEl.innerHTML = "Home";
break;
case "#/about":
contentEl.innerHTML = "About";
break;
default:
contentEl.innerHTML = "Default";
}
})
</script>
</body>
</html>
HTML5的History
history-demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Document</title>
</head>
<body>
<div id="app">
<a href="/home">home</a>
<a href="/about">about</a>
<div class="content">Default</div>
</div>
<script>
const contentEl = document.querySelector('.content');
const changeContent = () => {
switch (location.pathname) {
case "/home":
contentEl.innerHTML = "Home";
break;
case "/about":
contentEl.innerHTML = "About";
break;
default:
contentEl.innerHTML = "Default";
}
}
const aEls = ElementsByTagName("a");
for (let aEl of aEls) {
aEl.addEventListener("click", e => {
e.preventDefault();
const href = Attribute("href");
// 【pushState是history的⽅法，不是window的。】
// history.pushState({}, "", href);
changeContent();
})
}
window.addEventListener("popstate", changeContent)
</script>
</html>
认识vue-router
路由的使⽤步骤
路由的基本使⽤流程路由的默认路径history模式
router-link
路由懒加载
打包效果分析
路由的其他属性
动态路由基本匹配获取动态路由的值匹配多个参数NotFound
匹配规则加*
路由的嵌套配置
代码的页⾯跳转
query⽅式的参数
替换当前的位置
页⾯的前进后退
router-link的v-slot
route add 添加路由
router-view的v-slot
动态添加路由
动态删除路由
路由导航守卫
登录守卫功能
其他导航守卫
main.js
import { createApp } from 'vue' import router from './router' import App from './App.vue'
const app = createApp(App)
app.use(router)
// createApp(App).use(router).mount("#app") // 也可以这样写
router/index.js
import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'
// import Home from "../pages/Home.vue";
/
/ import About from "../pages/About.vue";
// 配置映射关系
const routes = [
{
path: "/",
redirect: "/home"
},
// /home/shops
{
path: "/home",
name: "home",
component: () => import(/* webpackChunkName: "home-chunk" */"../pages/Home.vue"),    meta: {
name: "why",
age: 18,
height: 1.88
},
children: [
{
path: "",
redirect: "/home/message" // redirect要拿完整的路径做重定向
},
{
path: "message",
component: () => import("../pages/HomeMessage.vue")
},
{
path: "shops",
component: () => import("../pages/HomeShops.vue")
}
]
},
{
path: "/about",
name: "about",
component: () => import("../pages/About.vue")
},
{
path: "/user/:username/id/:id",
component: () => import("../pages/User.vue")
},
{
path: "/login",

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。