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 ...
随机推荐
- PHP stripcslashes() 函数
实例 删除 "World!" 前面的反斜杠: <?php高佣联盟 www.cgewang.comecho stripslashes("Hello World!&qu ...
- mysql中走与不走索引的情况汇集(待全量实验)
说明 在MySQL中,并不是你建立了索引,并且你在SQL中使用到了该列,MySQL就肯定会使用到那些索引的,有一些情况很可能在你不知不觉中,你就“成功的避开了”MySQL的所有索引. 索引列参与计算 ...
- 2020牛客暑期多校训练营 第二场 I Interval 最大流 最小割 平面图对偶图转最短路
LINK:Interval 赛时连题目都没看. 观察n的范围不大不小 而且建图明显 考虑跑最大流最小割. 图有点稠密dinic不太行. 一个常见的trick就是对偶图转最短路. 建图有点复杂 不过建完 ...
- 快速构建一个springboot项目（一）
前言: springcloud是新一代的微服务框架而springboot作为springcloud的基础,很有必要对springboot深入学习一下. springboot能做什么? (1)spri ...
- “随手记”开发记录day06
今天还是继续完成统计页面,完成的按钮有支出大头和收入来源的饼状图, 由于之前写过相关的代码,这次的任务对我们来说还挺简单的,没有出现什么太大的问题,
- Azure DevOps+Docker+Asp.NET Core 实现CI/CD(一 .简介与创建自己的代理池)
前言 本文主要是讲解如何使用Azure DevOps+Docker 来实现持续集成Asp.NET Core项目(当然 也可以是任意项目). 打算用三个篇幅来记录完整的全过程 觉得有帮助的朋友~可以左上 ...
- 使用免费证书安装 ipa 到真机
使用免费证书安装 ipa 密码设置 进入 AppleId 官网 登录个人账号 登录进去之后, 找到 Security, 点击 Generate Password... 锁边输入几个字符, 再点击 Cr ...
- FreeAnchor 国科大
- XCTF-WEB-新手练习区(9-12)笔记
9:xff_referer X老师告诉小宁其实xff和referer是可以伪造的. 界面显示需要我们 添加X-Forwarded-For:123.123.123.123 添加Rerferer:http ...
- MySQL数据库——数据约束
1 什么数据约束 对用户操作表的数据进行约束 2 默认值(缺省约束) 作用: 当用户对使用默认值的字段不插入值的时候,就使用默认值. 注意: 1)对默认值字段插入null是可以的 2)对默认值字段可以 ...