Vue路由

路由概念

路由的本质就是一种对应关系，根据不同的URL请求，返回对应不同的资源。

路由分为：后端路由和前端路由

• 后端路由：由服务器端进行实现并实现资源映射分发(路由与路由之前切换会刷新页面)

• 前端路由：根据不同的事件来显示不同的页面内容，取事件与事件处理函数之间的对应关系(前端路由切换可能不会有网络请求存在，也不会有刷新页面)

SPA(Single Page Application)单页面应用程序,基于前端路由而起：整个网站只有一个页面，通过监听地址栏中的变化事件，来通过Ajax局部更新内容信息显示、同时支持浏览器地址栏的前进和后退操作。

---

前端路由实现

前端 浏览器 路由也有2种模式:

• hash模式(锚链接)

hash模式兼容性很强，刷新浏览器，页面还会存在

hash模式，缺点：地址栏不优雅，有#存在，不利于seo，记忆困难

// 通过 location.hash 获取到最新的 hash 值

console.log(location.hash)

 

 

 

---

• history模式 (html5 Api提供的)

history模式，兼容性较差，不能刷新页面/页面会404，需要服务器端配置支持

优点：地址栏更优雅，方便记忆，有利于有seo

history.pushState({},title,url); // 向历史记录中追加一条记录

history.replaceState({},title,url); // 替换当前页在历史记录中的信息。

在window对象中提供了onpopstate事件来监听历史栈的改变，只要历史栈有信息发生改变的话，就会触发该事件。

 

 

 

  回退

---

Vue官网--生态--Vue Router

网址：Vue Router

vue-router路由模式:

• hash: 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History的浏览器。
• history: 依赖 HTML5 History API 和服务器配置。查看 HTML5 History 模式。
• abstract: 支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式。（浏览器端web开发用不到）

 安装

如果在vue-cli创建项目时没有勾选上vue-router选项，此时就需要手动的来安装它

手动    // npm i -S vue-router

 

---

 Vue Router的基本使用步骤：

        创建 router 文件夹 ，再下面新建 index.js。

• 在 index.js 引入相关库文件

• import Vue from 'vue'

  import VueRouter from 'vue-router'

• VueRouter引入到Vue类中 以插件的方式引入。

• 定义路由组件规则并创建路由实例

# 创建路由实例

const router = new VueRouter({

  routes

})

# 定义路由规则

const routes = [

  { path: '/foo', component: Foo },

  { path: '/bar', component: Bar }

]

 

 

 

 

• 把路由挂载到Vue根实例中
• 添加路由组件渲染容器

总：

 

---

 

scoped就是样式作用域

---

声明式导航

它就是先在页面中定义好跳转的路由规则，vueRouter中通过 router-link组件来完成。

---

编程式导航 -- 就是通过js来实现路由跳转

---

 路由重定向/404

 404页面，5秒后跳转首页 ，定时器要关闭。

---

嵌套路由

嵌套路由最关键在于理解子级路由的概念：

比如我们有一个/users的路由，那么/users下面还可以添加子级路由，如:

/users/index、/users/add等等，这样的路由情形称之为嵌套路由。

 

---

 路由传参 / 动态路由匹配

    在vue中的路由传递参数的3个形式

• 动态路由参数    根据id查询详情    先定义再使用
• query字符串 ?id=10&name=lisi    搜索    直接在地址栏写就行
• props属性传值    隐式(数据传递时不让用户看到) -- 埋点
• 还可以通过 cookie或sessionStorage/locationStorage

 动态路由 params-- 先定义再使用

    

:id？    // ？代表可写可不写

动态路由标签内获取

  // 1

获取query字符串的方式

 props属性传值

---

埋点

可以用props，但是只要是cookie和stores

---

命名路由

 

 

# 路由

const router = new VueRouter({

  routes: [

    {

      path: '/user/:id',

      name: 'user',

      component: User

    }

  ]

})

# 声明路由

<router-link :to="{ name: 'user', params: { id: 123 }}">User</router-link>

---

导航守卫

就是路由跳转过程中的一些钩子函数，这个过程中触发的这些函数能让你操作一些其他的事儿的时机，这就是导航守卫。

• 全局守卫

不管路由如何切换，他都会触发

# 全局前置守卫    // 工作中用它最多

//当一个导航触发时,触发前置守卫，

to: Route: 即将要 进入的目标 路由对象    // 目标对象

from: Route: 当前导航正要 离开的路由    // 来源对象

next: Function: 一定要调用该next方法，否则路由不向下执行。

router.beforeEach((to, from, next) => {

  // next函数必须要调用，否则路由不会向下执行

  next()

})

//全局解析守卫

router.beforeResolve((to, from, next) => {

  next()

})

# 全局后置钩子

// 此钩子不会接受 next 函数也不会改变导航本身

router.afterEach((to, from) => {

})

• 路由独享的守卫（它的执行的顺序比beforeEach要晚，但早后beforeResolve）

 

• 组件内守卫  （它比全局前置要慢，比路由独享要慢，快于全局解析路由守卫）

你可以在路由组件内直接定义以下路由导航守卫

 const Foo = {

  template: `...`,

  beforeRouteEnter (to, from, next) {

    // 在渲染该组件的对应路由被 confirm 前调用

    // 不！能！获取组件实例 `this`

    // 因为当守卫执行前，组件实例还没被创建

  },

  beforeRouteUpdate (to, from, next) {

    // 在当前路由改变，但是该组件被复用时调用

    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，

    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。

    // 可以访问组件实例 `this`

  },

  beforeRouteLeave (to, from, next) {

    // 导航离开该组件的对应路由时调用

    // 可以访问组件实例 `this`

  }

}

---

 路由元信息    // 也可以做数据传递

定义路由的时候可以配置 meta 字段：

---

路由懒加载代码拆分

当打包构建应用时，js包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

js懒加载    // es6模块化中 import  

vue懒加载

异步懒加载 和 拆分 （es6模块化中 import 当做函数时，它就会拆分模块）

 想要 懒加载 要 回调 并 返回promise

 魔法注释     /*webpackChunkName:'文件名'*/

---

@占位符的代码提示

在vue中提供了一个占位符，@表示src

在根目录 创建一个 【jsconfig.json】文件

---

 路由规则 拆出来    防止多人合作冲突

---