文章目录
入门
router-link
router-view
🎡路由的hash模式和history模式
hash 形式
history形式
🌉实现前端路由
🎢使用 Vue-router 路由
⛲使用脚手架创建路由的例子
🌃路由重定向
🌇嵌套路由
🏡动态参数
命名路由
入门
router-link
<template>
<div class="dashboard">
<router-link to="/dashboard/vod">课程</router-link>
<router-link to="/dashboard/member">学生列表</router-link>
</div>
</template>
1
2
3
4
5
6
用一个自定义组件 router-link 来创建链接。这使得 Vue Router 可以在不重新加载页面的情况下更改 URL，处理 URL 的生成以及编码
router-view
router-view 将显示与 url 对应的组件。你可以把它放在任何地方，以适应你的布局。
🎡路由的hash模式和history模式
路由的本质就是一种对应关系，根据不同的URL请求返回对应不同的资源。那么url地址和真实的资源之间就有一种对应的关系,就是路由。
路由分为:后端路由 和前端路由
●后端路由:由服务器端进行实现并实现资源映射分发
。概念:根据不同的用户URL请求,返回不同的内容(地址与资源产生对应关系)
。本质: URL请求地址与服务器资源之间的对应关系
●前端路由:根据不同的事件来显示不同的页面内容,是事件与事件处理函数之间的对应关系
前端路由:根据不同的事件来显示不同的页面内容，是事件与事件处理函数之间的对应关系
概念:根据不同的用户事件,显示不同的页面内容(地址与事件产生对应关系)
本质:用户事件与事件处理函数之间的对应关系
SPA(Single Page Application)单页面应用程序,基于前端路由而起:整个网站只有一个页面，通过监听地址栏中的变化事件，来通过Ajax局部更新内容信息显示、同时支持浏览器地址栏的前进和后退操作。
hash 形式
http://localhost:5000/#/login
http://localhost:5000/#/getCode
http://localhost:5000/#/dashboard
history形式
http://localhost:5000/login
http://localhost:5000/getCode
http://localhost:5000/dashboard
🌉实现前端路由
hash路由实现的原理
window.addEventListner("hashchange",function(e){})
1
history 形式
let originalPushState = window.history.pushState;
let el = document.getElementById("content");
window.history.pushState = function (state, title, url) {
console.log("重写了pushState方法");
let urlValue = url.slice(1);
switch (urlValue) {
case "xinwen":
el.innerHTML = "新闻";
break;
case "vedio":
el.innerHTML = "视频";
break;
case "map":
el.innerHTML = "地图";
break;
}
originalPushState.call(this, state, title, url);
};
function handleClick(activeTab) {
console.log(activeTab);
window.history.pushState({}, "新闻", "/" + activeTab);
}
// https://developer.mozilla.org/zh-CN/docs/Web/API/Window/popstate_event
window.addEventListener("popstate", function () {
console.log(123);
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
🎢使用 Vue-router 路由
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">
<!-- <a href=""></a> -->
<!-- router-link vue-router 相当于之前的 a标签 -->
<!-- 3. 生成页面的跳转链接 -->
<router-link to="/pic">图片</router-link>
<!-- 4. 路由渲染的地方 -->
<router-view></router-view>
</div>
</body>
<!-- 1. 引入 依赖包 Vue 和 vue-router -->
<script src="./lib/vue.js"></script>
<script src="./lib/vue-router.js"></script>
<script>
// 安装VueRouter 插件
// Vue.use=>VueRouter.install
// Vue.use(VueRouter);
// https://cn.vuejs.org/v2/guide/plugins.html
/* 6. 新建对应的组件 */
let Pic = {
template: `
<h1>图片</h1>
`,
};
/* 5. 建立routes 变量，路由跟组件之间对应关系 */
let routes = [
{
path: "/pic",
component: Pic,
},
];
/* 6. 新建一个Router实例 */
let router = new VueRouter({
// routes:routes
routes,
});
/* 2. 使用 vue 接管 app节点 */
let vm = new Vue({
/* 7. 将router作为配置项 传入到 Vue 例中 */
router,
el: "#app",
});
</script>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
⛲使用脚手架创建路由的例子
main.js
import Vue from 'vue'
import App from './App.vue'
/* 1. 引入 router 路由模块 */
import router from './router'
Vue.config.productionTip = false
new Vue({
/* 2. 将 router 作为 配置项传入 */
router,
render: h => h(App)
}).$mount('#app')
1
2
3
4
5
6
7
8
9
10
11
12
🌃路由重定向
router/index.js
{
path: "/404",
name: "PageNotFind",
component: () => import("../components/PageNotFind.vue"),
},
{
path: "*",
redirect: "/404",
},
1
2
3
4
5
6
7
8
9
🌇嵌套路由
router/index.js
const routes = [
// /dashboard => DashBoard.vue 组件渲染出来
{
path: '/dashboard',
component: DashBoard,
children: [
{
path: '',
component: () => import('@/components/Home.vue'),
},
{
path: 'userlist',
component: () => import('@/components/UserList.vue'),
},
{
path: 'shoplist',
component: () => import('@/components/ShopList.vue'),
},
],
},
{
path: '/404',
component: () => import('@/components/PageNotFound.vue'),
},
{
path: '/',
component: () => import('@/components/HelloWorld.vue'),
},
{
path: '*',
redirect: '/404',
},
]
<!-- dashboar 组件 -->
<template>
<div class="dashboard">
<div class="left">左边的菜单的内容</div>
<div class="right">
<router-view />
</div>
</div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
🏡动态参数
{
/* 动态参数 */
path:"/product/:id",
component:()=>import("../components/Product.vue")
},
1
2
3
4
5
命名路由
{
path: "/",
name: "Home",
component: Home,
},
gotoSoga: function () {
// this.$router.push("dongman");// path:"dongman"
// name: "soga"
this.$router.push({
name: "soga",
params: {
id: 123,
},
});
