目录
路由
路由的本质就是对应关系
后端路由
- 概念:根据不同的用户URL请求, 返回不同的内容
- 本质:URL请求地址与服务器资源之间的对应关系
SPA(Single Page Application)
- 后端渲染(存在性能问题)
- Ajax前端渲染(前端渲染提高性能, 但是不支持浏览器的前进后退操作)
- SPA(Single Page Application) 单页面应用程序:整个网站只有一个页面, 内容的变化通过Ajax局部更新实现, 同时支持浏览器地址栏的前进和后退操作
- SPA实现原理之一:基于URL地址的hash(hash的变化会导致浏览器记录访问历史的变化, 但是hash的变化不会触发新的URL请求)
- 在实现SPA过程中, 最核心的技术点就是前端路由
前端路由
- 概念:根据不同的用户事件, 显示不同的页面内容
- 本质:用户事件与事件处理函数之间的对应关系
前端路由负责事件监听, 触发事件后, 通过事件函数渲染不同内容
$router : 是路由操作对象，只写对象 //$route : 路由信息对象，只读对象
实现简易前端路由
- 基于URL中的hash实现(点击菜单的时候改变URL的hash,根据hash的变化控制组件的切换)
//监听 window 的onhashchange 事件, 根据获取到的最新的hash值, 切换要显示的组件的名称
window.onhashchange = function () {
//通过 location.hash 获取到最新的hash值
};基于hash实现小案例
<!-- 被 vue 实例控制的 div 区域 -->
<div id="app">
<!-- 切换组件的超链接 -->
<a href="#/zhuye">主页</a>
<a href="#/keji">科技</a>
<a href="#/caijing">财经</a>
<a href="#/yule">娱乐</a>
<!-- 根据 :is 属性指定的组件名称，把对应的组件渲染到 component 标签所在的位置 -->
<!-- 可以把 component 标签当做是【组件的占位符】 -->
<component :is="'zhuye'"></component>
</div>
<script>
// #region 定义需要被切换的 4 个组件
// 主页组件
const zhuye = {
template: '<h1>主页信息</h1>'
}
// 科技组件
const keji = {
template: '<h1>科技信息</h1>'
}
// 财经组件
const caijing = {
template: '<h1>财经信息</h1>'
}
// 娱乐组件
const yule = {
template: '<h1>娱乐信息</h1>'
}
// #endregion
// #region vue 实例对象
const vm = new Vue({
el: '#app',
data: {
comName: 'keji'
},
// 注册私有组件
components: {
zhuye,
keji,
caijing,
yule
}
})
// #endregion
// 监听 window 的 onhashchange 事件，根据获取到的最新的 hash 值，切换要显示的组件的名称
window.onhashchange = function() {
// 通过 location.hash 获取到最新的 hash 值
console.log(location.hash);
switch(location.hash.slice(1)){
case '/zhuye':
vm.comName = 'zhuye'
break
....
}
}Vue Router
官方的路由管理器
Vue Router 包含的功能有
- 支持HTML5 历史模式或hash模式
- 支持嵌套路由
- 支持路由参数
- 支持编程式路由
- 支持命名路由
- 进阶请看官方文档
基本使用步骤
- 引入相关的库文件(vue-router.js)
- 添加路由连接
- 添加路由填充位
- 定义路由组件
- 配置路由规则并创建路由实例
- 把路由挂载到Vue根实例中
1.引入相关的库文件
<!-- 导入 vue 文件 为全局 window 对象挂载 Vue 构造函数 -->
<script src="/lib/vue_2.5.22.js"></script>
<!-- 导入 vue-router 文件 为全局 window 对象挂载 VueRouter 构造函数 -->
<script src="/lib/vue-router_3.0.2.js"></script>要先引入vue 才能引入vue-router
2.添加路由连接
<!-- router-link 是vue 提供的标签 默认会被渲染为a标签 -->
<!-- to 属性默认会被渲染为 href 属性 -->
<!-- to 属性的值默认会被渲染为#开头的hash地址 -->
<router-link to="/user">User</router-link>
<router-link to="/register">register</router-link>3. 添加路由填充位
<!-- 路由填充为(也叫做路由占位符) -->
<!-- 将来通过路由规则匹配到的组件 将会被渲染到 router-view 所在的位置 -->
<router-view></router-view>4. 定义路由组件
var User = { template:'
<div>User</div>
' }
var Reqister = { template:'
<div>Reqister</div>
' }5.配置路由规则并创建路由实例
// 创建路由实例对象
var router = new VueRouter({
//routers 是路由规则数组
routes: [
// 每个路由规则都是一个配置对象, 其中至少包含path 和 component两个属性
// path 表示当前路由规则匹配的 hash地址
// component 表示当前路由规则对应要展示的组件
{ path: "/user", component: User },
{ path: "/register", component: Register },
],
});6. 把路由挂载到Vue根实例中
var vm = new Vue({
el: "#app",
// 为了能够让路由规则生效,必须把路由对象挂载到vue实例对象上
data: {},
methods: {},
router
});路由重定向
路由重定向指的是:用户在访问地址A的时候,强制用户跳转到地址C 从而展示特定的组件画面;
通过路由规则的 redirect属性 指定一个新的路由地址, 可以很方便的设置路由的重定向
var router = new VueRouter({
routes: [
{ path: "/", redirect: '/user' },
{ path: "/user", component: User },
{ path: "/register", component: Register }
],
});路由嵌套
- 点击父级路由链接显示模版内容
- 模版内容中又有子级路由连接
- 点击子级路由连接显示子级模版内容
先创建父路由组件模版
- 父级路由链接
- 父组件路由填充位
<router-link to="/user">User</router-link>
<router-link to="/register">Register</router-link>
<div>
<!-- 控制组件的显示位置 -->
<router-view></router-view>
</div>子级路由模版
- 子级路由链接
- 子级路由填充位
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>`,
};父级路由通过children属性配置子级路由
var router = new VueRouter({
routes: [
{ path: "/", redirect: "/user" },
{ path: "/user", component: User },
{
path: "/register",
component: Register,
// 通过children 属性, 为 /register 添加子路由规则
children: [
{ path: "/register/tap1", component: Tab1 },
{ path: "/register/tap2", component: Tab2 },
],
},
],
});动态匹配路由的基本用法
应用场景:通过动态路由参数的模式进行路由匹配
var router = new VueRouter({
routes: [
// 动态路径参数, 以冒号开头
{ path: "/user/:id", redirect: "user" },
],
}); const User = {
// 路由组件中通过$route.params获取路由参数
template: "<div>User{{$route.params.id}}</div>",
};路由组件传递参数
$route与对应路由形成高度耦合, 不够灵活, 所以可以使用props将组件和路由解耦
1. props的值为布尔类型
const router = new VueRouter({
routes: [
// 如果props被设置为true route.params 将会被设置为组件属性
{ path: "/user/:id", component: User, props: true },
],
});
const User = {
// 使用props 接收路由参数
props: ["id"],
// 使用路由参数
template: `<div>用户ID:{{ID}}</div>`,
};2.props的值为对象类型
const router = new VueRouter({
routes: [
// 如果props被设置为true route.params 将会被设置为组件属性
{ path: "/user/:id", component: User, props: { uname : 'zs', age : 12 }},
],
});
const User = {
// 使用props 接收路由参数
props: ["uname" , 'age'],
// 使用路由参数
template: `<div>用户信息:{{ uname + '---' + age}}</div>`,
};3. props的值为函数类型
const router = new VueRouter({
routes: [
// 如果props被设置为true route.params 将会被设置为组件属性
{ path: "/user/:id", component: User, props: route => { uname : 'zs', age : 12 , id:route.params.id}},
],
});
const User = {
// 使用props 接收路由参数
props: ["uname" , 'age' , 'id'],
// 使用路由参数
template: `<div>用户信息:{{ uname + '---' + age + '---' + id}}</div>`,
};页面导航的两种方式
-
声明式导航: 通过点击链接实现导航的方式, 叫做声明式导航
-
例如普通网页中的a链接和vue中的router-link
-
-
编程式导航:通过调用JavaScript形式的API实现导航的方式,叫做编程式导航
-
例如:普通网页中的location.href
-
常见的编程式导航API如下:
- this.$router.push('hash地址')
- this.$router.go(n)
路由导航守卫
如果用户没有登录,但是直接通过URL访问特定页面, 需要重新导航到登录页面 router.js中
//为路由对象,添加veforeEach 导航守卫
router.beforeEach((to, from, next) => {
// 如果用户访问的登录页,直接放行
if (to.path === "/url") return next();
// 从 sessionStorage 中获取到保存的 token值
const tokenStr = window.sessionStorage.getItem("token");
// 没有token 强制跳转到登录页
if (!tokenStr) return next("/url");
next();
});
扫一扫
245
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
