Vue基础（五）---- 前端路由
基本结构：
◆ 1、路由的基本概念与原理
◆ 2、vue-router的基本使用
◆ 3、vue-router嵌套路由
◆ 4、vue-router动态路由匹配
◆ 5、vue-router命名路由
◆ 6、vue-router编程式导航
◆ 7、基于vue-router的案例
◆ 1、路由的基本概念与原理
1.1 路由
路由是一个比较广义和抽象的概念，路由的本质就是对应关系。
在开发中，路由分为：
◆ 后端路由
◆ 前端路由
◆ 后端路由
本质：后端路由根据不同的 URL地址 分发不同的 服务器资源。
过程：浏览器发送url 地址请求 --------------被后端路由拦截----------------> 后端路由去服务器查找对应的服务器资源 --------------------> 后端路由发送给浏览器进行渲染
（早期开发中，绝大多数网站都是采用这种方式）--- 后端渲染
但是这种渲染方式会存在性能问题，假设浏览器有频繁的提交表单的数据交互行为，后端路由会造成网页的不断刷新，体验非常差
因此：
SPA（Single Page Application）单页面应用程序
后端渲染（存在性能问题）--------------发展最初
Ajax前端渲染（前端渲染局部刷新网页，提高性能，但是不支持浏览器的前进后退操作）----------------发展中
SPA（Single Page Application）： ---------------发达
整个网站只有一个页面，内容的变化通过Ajax局部更新实现、同时支持浏览器地址栏的前进和后退操作
SPA实现原理之一：基于URL地址的hash（hash的变化会导致浏览器记录访问历史的变化、但是hash的变化不会触发新的URL请求）
在实现SPA过程中，最核心的技术点就是前端路由
2. 前端路由
概念：根据不同的用户事件，显示不同的页面内容
本质：用户事件与事件处理函数之间的对应关系
不推荐手动模拟路由，尽量使用 Vue.js 官方的路由管理器--------------Vue Router
◆ 2、vue-router的基本使用
Vue Router（官网：https://router.vuejs.org/zh/）是Vue.js 官方的路由管理器。
它和Vue.js 的核心深度集成，可以非常方便的用于SPA应用程序的开发。
支持HTML5 历史模式或 hash 模式
支持嵌套路由
支持路由参数
支持编程式路由
支持命名路由
导航守卫
路由懒加载
2.1 基本使用步骤
1. 引入相关的库文件
首先引入：<script src="./lib/vue_2.5.22.js"></script>
其次引入：<script src="./lib/vue-router_3.0.2.js"></script>，因为 vue-router 是依赖于 vue 的，顺序不能颠倒
2. 添加路由链接
3. 添加路由填充位
<div id="app">
<!-- router-link 是 vue 中提供的标签，默认会被渲染为 a 标签 -->
<!-- to 属性默认会被渲染为 href 属性 -->
<!-- to 属性的值默认会被渲染为 # 开头的 hash 地址 -->
<router-link to="/user">User</router-link>
<router-link to="/register">Register</router-link> <!-- 路由占位符 -->
<!-- 将来通过路由规则匹配到的组件，将会被渲染到 router-view 所在的位置 -->
<router-view></router-view>
</div>
4. 定义路由组件
const User = {
template: "<h1>User 组件</h1>",
};
const Register = {
template: "<h1>Register 组件</h1>",
};
5. 配置路由规则并且创建路由实例
// 创建路由实例对象
const router = new VueRouter({
// 所有的路由规则
routes: [
// 每个路由规则都是一个配置对象，其中至少包含 path 和 component 两个属性：
// path 表示当前路由规则匹配的 hash 地址
// component 表示当前路由规则对应要展示的组件
{ path: "/user", component: User },
{ path: "/register", component: Register },
],
});
6. 把路由挂载到Vue 根实例中
// 创建 vm 实例对象
const vm = new Vue({
// 指定控制的区域
el: "#app",
data: {},
// 挂载路由实例对象
// router: router（在ES6中如果属性名和值一样，可以简写）
router,
});
2.2 路由重定向
routes: [
{ path: '/', redirect: '/user'},
{ path: '/user', component: User },
{ path: '/register', component: Register }
]
◆ 3、vue-router嵌套路由
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<!-- 导入 vue 文件 -->
<script src="./lib/vue_2.5.22.js"></script>
<script src="./lib/vue-router_3.0.2.js"></script>
</head>
<body>
<!-- 被 vm 实例所控制的区域 -->
<div id="app">
<router-link to="/user">User</router-link>
<router-link to="/register">Register</router-link> <!-- 路由占位符 -->
<router-view></router-view>
</div> <script>
const User = {
template: "<h1>User 组件</h1>",
}; const Register = {
template: `<div>
<h1>Register 组件</h1>
<hr/> <!-- 子路由链接 -->
<router-link to="/register/tab1">tab1</router-link>
<router-link to="/register/tab2">tab2</router-link> <!-- 子路由的占位符 -->
<router-view />
<div>`,
}; const Tab1 = {
template: "<h3>tab1 子组件</h3>",
}; const Tab2 = {
template: "<h3>tab2 子组件</h3>",
}; // 创建路由实例对象
const router = new VueRouter({
// 所有的路由规则
routes: [
{ path: "/", redirect: "/user" },
{ path: "/user", component: User },
// children 数组表示子路由规则
{
path: "/register",
component: Register,
children: [
{ path: "/register/tab1", component: Tab1 },
{ path: "/register/tab2", component: Tab2 },
],
},
],
}); // 创建 vm 实例对象
const vm = new Vue({
// 指定控制的区域
el: "#app",
data: {},
// 挂载路由实例对象
// router: router
router,
});
</script>
</body>
</html>
◆ 4、vue-router动态路由匹配
思考：<!–有如下3 个路由链接-->
<router-link to="/user/1">User1</router-link>
<router-link to="/user/2">User2</router-link>
<router-link to="/user/3">User3</router-link> // 定义如下三个对应的路由规则，是否可行？？？
{ path: '/user/1', component: User1 }
{ path: '/user/2', component: User2 }
{ path: '/user/3', component: User3 } // 太过于繁杂
4.1 动态匹配路由的基本用法
应用场景：通过动态路由参数的模式进行路由匹配
var router = new VueRouter({
routes: [
// 动态路径参数以冒号开头
{ path: '/user/:id', component: User }
]
})
const User = {
// 路由组件中通过$route.params获取路由参数
template: '<div>User {{ $route.params.id }}</div>'
}
缺点：$route与对应路由形成高度耦合，不够灵活，所以可以使用props将组件和路由解耦
4.2 路由组件传递参数
1. props的值为布尔类型-----------( 动态接收ID)
2. props的值为对象类型-----------( 接收对象数据)
3. props的值为函数类型-----------( 动态接收ID + 接收对象数据 )
◆ 5、vue-router命名路由
在命名路由规则中加一个 name 属性，相当于代替之前的path属性中的路径，注意：此时to前面需要动态绑定，加 " : "
◆ 6、vue-router编程式导航
6.1 页面导航的两种方式
声明式导航：通过点击链接实现导航的方式，叫做声明式导航
例如：普通网页中的<a></a> 链接或vue 中的<router-link></router-link>
编程式导航：通过调用JavaScript形式的API实现导航的方式，叫做编程式导航
例如：普通网页中的location.href
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<!-- 导入 vue 文件 -->
<script src="./lib/vue_2.5.22.js"></script>
<script src="./lib/vue-router_3.0.2.js"></script>
</head>
<body>
<!-- 被 vm 实例所控制的区域 -->
<div id="app">
<router-link to="/user/1">User1</router-link>
<router-link to="/user/2">User2</router-link>
<router-link :to="{ name: 'user', params: {id: 3} }">User3</router-link>
<router-link to="/register">Register</router-link> <!-- 路由占位符 -->
<router-view></router-view>
</div> <script>
const User = {
props: ["id", "uname", "age"],
template: `<div>
<h1>User 组件 -- 用户id为: {{id}} -- 姓名为:{{uname}} -- 年龄为：{{age}}</h1>
<button @click="goRegister">跳转到注册页面</button>
</div>`,
methods: {
goRegister: function () {
this.$router.push("/register");
},
},
}; const Register = {
template: `<div>
<h1>Register 组件</h1>
<button @click="goBack">后退</button>
</div>`,
methods: {
goBack() {
this.$router.go(-1);
},
},
}; // 创建路由实例对象
const router = new VueRouter({
// 所有的路由规则
routes: [
{ path: "/", redirect: "/user" },
{
// 命名路由
name: "user",
path: "/user/:id",
component: User,
props: (route) => ({ uname: "zs", age: 20, id: route.params.id }),
},
{ path: "/register", component: Register },
],
}); // 创建 vm 实例对象
const vm = new Vue({
// 指定控制的区域
el: "#app",
data: {},
// 挂载路由实例对象
// router: router
router,
});
</script>
</body>
</html>
◆ 7、基于vue-router的案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>基于vue-router的案例</title>
<style type="text/css">
html,
body,
#app {
margin: 0;
padding: 0px;
height: 100%;
}
.header {
height: 50px;
background-color: #545c64;
line-height: 50px;
text-align: center;
font-size: 24px;
color: #fff;
}
.footer {
height: 40px;
line-height: 40px;
background-color: #888;
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
color: #fff;
}
.main {
display: flex;
position: absolute;
top: 50px;
bottom: 40px;
width: 100%;
}
.content {
flex: 1;
text-align: center;
height: 100%;
}
.left {
flex: 0 0 20%;
background-color: #545c64;
}
.left a {
color: white;
text-decoration: none;
}
.right {
margin: 5px;
}
.btns {
width: 100%;
height: 35px;
line-height: 35px;
background-color: #f5f5f5;
text-align: left;
padding-left: 10px;
box-sizing: border-box;
}
button {
height: 30px;
background-color: #ecf5ff;
border: 1px solid lightskyblue;
font-size: 12px;
padding: 0 20px;
}
.main-content {
margin-top: 10px;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
ul li {
height: 45px;
line-height: 45px;
background-color: #a0a0a0;
color: #fff;
cursor: pointer;
border-bottom: 1px solid #fff;
} table {
width: 100%;
border-collapse: collapse;
} td,
th {
border: 1px solid #eee;
line-height: 35px;
font-size: 12px;
} th {
background-color: #ddd;
}
</style>
<script src="./lib/vue_2.5.22.js"></script>
<script src="./lib/vue-router_3.0.2.js"></script>
</head>
<body>
<!-- 要被 vue 实例所控制的区域 -->
<div id="app">
<!-- 路由占位符 -->
<router-view></router-view>
</div> <script>
// 定义 APP 根组件
const App = {
template: `<div>
<!-- 头部区域 -->
<header class="header">传智后台管理系统</header>
<!-- 中间主体区域 -->
<div class="main">
<!-- 左侧菜单栏 -->
<div class="content left">
<ul>
<li><router-link to="/users">用户管理</router-link></li>
<li><router-link to="/rights">权限管理</router-link></li>
<li><router-link to="/goods">商品管理</router-link></li>
<li><router-link to="/orders">订单管理</router-link></li>
<li><router-link to="/settings">系统设置</router-link></li>
</ul>
</div>
<!-- 右侧内容区域 -->
<div class="content right"><div class="main-content">
<router-view />
</div></div>
</div>
<!-- 尾部区域 -->
<footer class="footer">版权信息</footer>
</div>`,
}; const Users = {
data() {
return {
userlist: [
{ id: 1, name: "张三", age: 10 },
{ id: 2, name: "李四", age: 20 },
{ id: 3, name: "王五", age: 30 },
{ id: 4, name: "赵六", age: 40 },
],
};
},
methods: {
goDetail(id) {
console.log(id);
this.$router.push("/userinfo/" + id);
},
},
template: `<div>
<h3>用户管理区域</h3>
<table>
<thead>
<tr><th>编号</th><th>姓名</th><th>年龄</th><th>操作</th></tr>
</thead>
<tbody>
<tr v-for="item in userlist" :key="item.id">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>
<a href="javascript:;" @click="goDetail(item.id)">详情</a>
</td>
</tr>
</tbody>
</table>
</div>`,
}; const UserInfo = {
props: ["id"],
template: `<div>
<h5>用户详情页 --- 用户Id为：{{id}}</h5>
<button @click="goback()">后退</button>
</div>`,
methods: {
goback() {
// 实现后退功能
this.$router.go(-1);
},
},
}; const Rights = {
template: `<div>
<h3>权限管理区域</h3>
</div>`,
};
const Goods = {
template: `<div>
<h3>商品管理区域</h3>
</div>`,
};
const Orders = {
template: `<div>
<h3>订单管理区域</h3>
</div>`,
};
const Settings = {
template: `<div>
<h3>系统设置区域</h3>
</div>`,
}; // 创建路由对象
const router = new VueRouter({
routes: [
{
path: "/",
component: App,
redirect: "/users",
children: [
{ path: "/users", component: Users },
{ path: "/userinfo/:id", component: UserInfo, props: true },
{ path: "/rights", component: Rights },
{ path: "/goods", component: Goods },
{ path: "/orders", component: Orders },
{ path: "/settings", component: Settings },
],
},
],
}); const vm = new Vue({
el: "#app",
router,
});
</script>
</body>
</html>
Vue基础（五）---- 前端路由的更多相关文章
- Vue(三)之前端路由
01-前端路由 1.前端路由的实现原理 vue+vue-router 主要来做单页面应用(Single Page Application) 为什么我们要做单页面应用? (1)传统的开发方式 url改变 ...
- [Vue 牛刀小试]：第十二章 - 使用 Vue Router 实现 Vue 中的前端路由控制
一.前言 前端路由是什么?如果你之前从事的是后端的工作,或者虽然有接触前端,但是并没有使用到单页面应用的话,这个概念对你来说还是会很陌生的.那么,为什么会在单页面应用中存在这么一个概念,以及,前端路由 ...
- Vue(基础五)_vue中用ref和给dom添加事件的特殊情况
一.前言 这篇文章涉及的主要内容有: 1.ref绑定在标签上是获取DOM对象 2.ref绑定在子组件上获取的是子组件对象 3.案列:自动获取input焦点 二.主要内容 1.基础内容: ref 被用来 ...
- vue.js利用vue.router创建前端路由
node.js方式: 利用node.js安装vue-router模块 cnpm install vue-router 安装完成后我们引入这个模板! 下载vue-router利用script引入方式: ...
- vue基础五
条件渲染 1.v-if 1.1<template>中v-if条件组 因为 v-if 是一个指令,需要将它添加到一个元素上.但是如果我们想切换多个元素呢?此时我们可以把一个<templ ...
- vue基础总结
Vue语法: new Vue({ //挂载: el: '#app', //初始化数据: data: {}, //监听 data 的数据变化: watch: { todos: { //深度监视 hand ...
- 浅析使用vue-router实现前端路由的两种方式
关于vue-router 由于最近的项目中一直在使用vue,所以前端路由方案也是使用的官方路由vue-router,之前在angularJS项目中也是用过UI-router,感觉大同小异,不过很显然v ...
- [前端] VUE基础 (6) (v-router插件、获取原生DOM)
一.v-router插件 1.v-router插件介绍 v-router是vue的一个核心插件,vue+vue-router主要用来做SPA(单页面应用)的. 什么是SPA:就是在一个页面中,有多个页 ...
- 在Bootstrap开发框架基础上增加WebApi+Vue&Element的前端
基于Metronic的Bootstrap开发框架是我们稍早一点的框架产品,界面部分采用较新的Bootstrap技术,框架后台数据库支持Oracle.SqlServer.MySql.PostgreSQL ...
随机推荐
- Python File isatty() 方法
概述 isatty() 方法检测文件是否连接到一个终端设备,如果是返回 True,否则返回 False.高佣联盟 www.cgewang.com 语法 isatty() 方法语法如下: fileObj ...
- PHP uksort() 函数
------------恢复内容开始------------ 实例 使用用户自定义的比较函数对数组 $arr 中的元素按键名进行排序: <?phpfunction my_sort($a,$b){ ...
- PHP cal_days_in_month() 函数
------------恢复内容开始------------ 实例 针对指定的年份和历法,获取一个月中的天数: <?php$d=cal_days_in_month(CAL_GREGORIAN,1 ...
- MySQL选错索引导致的线上慢查询事故
前言 又和大家见面了!又两周过去了,我的云笔记里又多了几篇写了一半的文章草稿.有的是因为质量没有达到预期还准备再加点内容,有的则完全是一个灵感而已,内容完全木有.羡慕很多大佬们,一周能产出五六篇文章, ...
- Dynamics 365 CRM On premise Unable to Load plug-in assembly
背景介绍: 本地部署Microsoft Dynamics CRM 9.0正常可用,后打补丁到9.0.16.7,打开系统quote报 “ Unable to Load plug-in assembly” ...
- 题解 Luogu P1514 【引水入城】
有一种神奇的算法叫做floodfill 就是一个n*m的矩阵,a[i][j]为当前高度,我们可以任选一个点倒水,开始bfs,如果要搜的点没有被搜到过,并且高度小于当前的点,我们就把这个点加入队列中 而 ...
- MyBatis版本升级导致OffsetDateTime入参解析异常问题复盘
背景 最近有一个数据统计服务需要升级SpringBoot的版本,由1.5.x.RELEASE直接升级到2.3.0.RELEASE,考虑到没有用到SpringBoot的内建SPI,升级过程算是顺利.但是 ...
- Spring Validation最佳实践及其实现原理，参数校验没那么简单！
之前也写过一篇关于Spring Validation使用的文章,不过自我感觉还是浮于表面,本次打算彻底搞懂Spring Validation.本文会详细介绍Spring Validation各种场景下 ...
- C#LeetCode刷题之#434-字符串中的单词数（Number of Segments in a String）
问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/3941 访问. 统计字符串中的单词个数,这里的单词指的是连续的不是 ...
- Vue watch对象属性并触发多个事件
在vue中监控一个对象的属性变化,并且触发监听事件 watch: { 'user': [ { handler: (nweVal, oldVal) => { console.info('in 1 ...