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)
}
382
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
