4.vue路由 + 项目
4.1 路由的概念
路由的本质就是一种 对应关系 ,根据不同的URL请求,返回对应不同的资源。那么url地址和真实的资源之间就有一种对应的关系,就是路由。
路由分为: 后端路由 和 前端路由
-
后端路由:由服务器端进行实现并实现资源映射分发
-
概念:根据不同的用户URL请求,返回不同的内容(地址与资源产生对应关系)
-
本质:URL请求地址与服务器资源之间的对应关系
Node _ ejs
用户地址栏输入 /user,匹配到服务器 user的路由,服务做相关的业务逻辑,通过 res.render()渲染了一个新的页面
-
-
前端路由:根据不同的事件来显示不同的页面内容,是事件与事件处理函数之间的对应关系
-
概念:根据不同的用户事件,显示不同的页面内容(地址与事件产生对应关系)
-
本质:用户事件与事件处理函数之间的对应关系
-
SPA(Single Page Application)单页面应用程序,基于前端路由而起:整个网站只有一个页面,通过监听地址栏中的变化事件,来通过Ajax局部更新内容信息显示、同时支持浏览器地址栏的前进和后退操作。
4.2 前端路由实现
前端路由有2种模式:
-
hash模式
hash路由模式是这样的:http://xxx.abc.com/#/xx。 有带#号,后面就是hash值的变化。改变后面的hash值,它不会向服务器发出请求,因此也就不会刷新页面。并且每次hash值发生改变的时候,会触发hashchange事件。因此我们可以通过监听该事件,来知道hash值发生了哪些变化。
window.addEventListener('hashchange', ()=>{ // 通过 location.hash 获取到最新的 hash 值 console.log(location.hash); });
-
history模式 (我们在创建创建项目的时候选择的就是这个)
HTML5的History API为浏览器的全局history对象增加了该扩展方法。它是一个浏览器(bom)的一个接口,在window对象中提供了onpopstate事件来监听历史栈的改变,只要历史栈有信息发生改变的话,就会触发该事件。
history.pushState({},title,url); // 向历史记录中追加一条记录 history.replaceState({},title,url); // 替换当前页在历史记录中的信息。 window.addEventListener('popstate', function(event) { console.log(event) })
注:浏览器地址没有#, 比如(http://localhost:3001/a); 它也一样不会刷新页面的。但是url地址会改变。但它在服务器没有配置的情况下,不能手动刷新,否则返回404页面
hash 纯前端 操作,history需要后端的配合
hash路由体验
<!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> <a href="#/a">a页面</a> <a href="#/b">b页面</a> <a href="#/c">c页面</a> <a href="#/d">d页面</a> <div id="router-view"></div> </body> <script> const routerView = document.getElementById('router-view') window.addEventListener('hashchange', () => { // http://localhost:8080/#/a console.log(window.location.hash) render(window.location.hash.split('#')[1]) }) render('/a ') function render (type) { switch (type) { case '/a': routerView.innerHTML = '首页' break; case '/b': routerView.innerHTML = '分类' break; case '/c': routerView.innerHTML = '购物车' break case '/d': routerView.innerHTML = '我的' break; default: break; } } </script> </html>
4.3 Vue Router
网址:Vue Router
4.3.1 介绍
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。包含的功能有:
-
嵌套的路由/视图表
-
模块化的、基于组件的路由配置
-
路由参数、查询、通配符
-
基于 Vue.js 过渡系统的视图过渡效果
-
细粒度的导航控制
-
带有自动激活的 CSS class 的链接
-
HTML5 历史模式或 hash 模式,在 IE9 中自动降级
-
自定义的滚动条行为
4.3.2 安装
如果在vue-cli创建项目时没有勾选上 vue-router 选项,此时就需要手动的来安装它(切记,要进入项目中再去运行这个指令),不过我们之前创建项目时已经安装上了,所以下面的命令时不需要的。
cnpm i vue-router -S
查看是否安装成功,查看文件 package.json的依赖文件中是否包含 vue-router选项
4.3.3 Vue Router基本使用
Vue Router的基本使用步骤:
-
引入相关库文件 (咱们使用脚手架创建,本身已经自带引入)
-
VueRouter引入到Vue类中 (咱们使用脚手架创建,本身已经自带引入, src/router/index.js)
-
定义路由组件规则(查看项目文件下的src/router文件夹,里面有index.js)
-
感受路由懒加载带来的好处
import Vue from 'vue' import VueRouter from 'vue-router' // 不管需不需要使用该组件,先全部引入再说 import Home from '../views/Home.vue' // import About from '../views/About.vue' // 以中间价的形式生命 路由 Vue.use(VueRouter) // 路由规则 const routes = [ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About', // component: About // 路由懒加载,进一步优化代码 // 需要用到该组件时才去加载该组件 // component: () => import('../views/About.vue') // webpackChunkName 起名字 -- 可读性更强 component: () => import(/* webpackChunkName: "about" */ '../views/About.vue') } ] const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes }) export default router
# 根据以下命令 打包后 查看 dist/js中的 文件的变化 cnpm run build
-
创建路由实例(查看项目文件下的src/router文件夹,里面有index.js)
-
把路由挂载到Vue根实例中(查看项目文件下的src/main.js)
以后在程序中可以通过 this.$router 访问到 路由的实例
-
添加路由组件渲染容器到对应组件中(占坑)(查看项目文件下的src/App.vue)
4.3.4 导航方式
在页面中,导航实现有2种方式:
-
声明式导航:通过点击链接实现的导航方式,例如HTML中的“a”标签,Vue中的“router-link”所实现的。
-
它就是先在页面中定义好跳转的路由规则,vueRouter中通过 router-link组件来完成
-
<router-link to="path">xxx</router-link> <!-- to 要跳转到的路由规则 string|object to="users" :to="{path:'path'}" -->
<template> <div id="app"> <div id="nav"> <!-- 声明式跳转-标签跳转 router-link 默认渲染为 a 标签, to属性 渲染为 href 属性 如果想要更改默认的 a 标签,可以使用 tag 属性 --> <router-link to="/" tag="button">Home</router-link> | <router-link to="/about" tag="button">About</router-link> </div> <router-view/> </div> </template> <style lang="stylus"> #app font-family Avenir, Helvetica, Arial, sans-serif -webkit-font-smoothing antialiased -moz-osx-font-smoothing grayscale text-align center color #2c3e50 margin-top 60px </style>
-
编程式导航:通过调用JavaScript形式API实现的导航方式,例如location.href实现的跳转效果
-
简单来说,编程式导航就是通过 JavaScript 来实现路由跳转
-
<template> <div id="app"> <div id="nav"> <!-- 声明式跳转-标签跳转 router-link 默认渲染为 a 标签, to属性 渲染为 href 属性 如果想要更改默认的 a 标签,可以使用 tag 属性 --> <!-- <router-link to="/" tag="button">Home</router-link> | <router-link to="/about" tag="button">About</router-link> --> <!-- 编程式跳转-js跳转 this.$router.push() this.$router.replace() this.$router.back() this.$router.go(num) --> <span @click="$router.push('/')">Home</span> | <span @click="$router.push('/about')">About</span> </div> <router-view/> </div> </template> <style lang="stylus"> #app font-family Avenir, Helvetica, Arial, sans-serif -webkit-font-smoothing antialiased -moz-osx-font-smoothing grayscale text-align center color #2c3e50 margin-top 60px </style>
注意点:编程式导航在跳转到与当前地址一致的URL时会报错,但这个报错不影响功能:
如果患有强迫症,可以在路由入口文件 index.js 中添加如下代码解决该问题:
const originalPush = VueRouter.prototype.push VueRouter.prototype.push = function push (location) { return originalPush.call(this, location).catch((err) => err) }