一、Vue路由基础用法：

1 .安装
 npm install vue-router --save
2 .main.js中
//Vue路由：引入
import VueRouter from 'vue-router'
Vue.use(VueRouter)

//Vue路由：引入并创建组件
import BYHome from './components/BYHome.vue'
import BYNews from './components/BYNews.vue'
import HelloWorld from './components/HelloWorld.vue'

//Vue路由：配置路由
const routes = [
  {path: '/home', component: BYHome},
  {path: '/news', component: BYNews},
  {path: '/helloworld', component: HelloWorld},
  {path: '*', redirect: '/home'} /*默认跳转路由 */
]

//Vue路由：实例化VueRouter 
const router = new VueRouter({
  routes //缩写，相当于 routes:routes
})

new Vue({
  router, //Vue路由：挂载路由
  render: h => h(App),
}).$mount('#app')

//Vue路由：根组件的模板里面放上下面这句话，需要在App.vue 中配置路由出口：路由匹配到的组件将渲染在根组件App.vue中
<router-view></router-view>

//路由跳转
<router-link to="/home">首页</router-link>  
<router-link to="/news">新闻</router-link>
<router-link to="/helloworld">helloWorld</router-link>

二、Vue路由配置的抽出

1.安装

  npm install vue-router --save

2.创建router.js文件，在该文件中配置路由并暴露出去

 import Vue from 'vue';
  //Vue路由：引入
    import VueRouter from 'vue-router'
    Vue.use(VueRouter)

    //Vue路由：引入并创建组件
    import BYHome from '../BYHome.vue'
    import BYNews from '../BYNews.vue'
    import HelloWorld from '../HelloWorld.vue'

    //Vue路由：配置路由
    const routes = [
      {path: '/home', component: BYHome},
      {path: '/news', component: BYNews},
      {path: '/helloworld', component: HelloWorld},
      {path: '*', redirect: '/home'} /*默认跳转路由 */
    ]

    //Vue路由：实例化VueRouter 
    const router = new VueRouter({
      routes //缩写，相当于 routes:routes
    })
    //Vue路由：需要在App.vue 中配置路由出口：路由匹配到的组件将渲染在根组件App.vue中
    /* <router-view></router-view> */


    //暴露出去
    export default router;

3.在main.js中

//Vue路由：引入路由文件
import router from ‘./components/jsTool/router.js’

new Vue({undefined
router, //Vue路由：挂载路由
render: h => h(App),
}).$mount(’#app’)

4.Vue路由：根组件的模板里面放上下面这句话，需要在App.vue 中配置路由出口：路由匹配到的组件将渲染在根组件App.vue中

   <router-view></router-view>

5.路由跳转

<router-link to="/home">首页</router-link>  
<router-link to="/news">新闻</router-link>
  <router-link to="/helloworld">helloWorld</router-link>

三、路由动态传值：

1.获取路由的get传值

//路由配置

import BYHomeDetail from '../BYHomeDetail.vue'
{path: '/homeDetail', component:BYHomeDetail},
//跳转时跟get参数
<li li v-for="(listItem,homeKey) in msglist">
            <router-link :to="'/homeDetail?id='+homeKey"> {{listItem.title}} </router-link>
 </li>
 //子页面获取路由的get传值
  mounted(){
    console.log(this.$route.query);
}

2.动态路由传值

//路由配置：带形参
import BYNewDetail from '../BYNewDetail.vue'
{path: '/newDetail/:aid', component: BYNewDetail}, 
//跳转时传值
<li v-for="(item,key) in list">
    <!-- 给 newDetail 传值 -->
    <router-link :to="'/newDetail/'+key">{{key}}--{{item}}</router-link>
</li>
//子页面获取动态路由传值
 mounted(){
    console.log(this.$route.params);
}

四、路由的跳转方式：

第一种跳转方式:编程式导航

{path: '/news', component: BYNews},
this.$router.push({path:'news'});
带参：
{path: '/newDetail/:aid', component: BYNewDetail},
this.$router.push({path:'/newDetail/495'});

第二种跳转方式：命名路由

 {path: '/news', component: BYNews,name:'news'},
    this.$router.push({name:'news'});
    带参：
    this.$router.push({name:'news',params:{userId:123}});

五、路由的hash模式以及history模式：

默认是hash模式，路由上方的路径是用#表示，http://localhost:8080/#/news

可以将hash模式改为history模式，路由上方的路径就没有了

#,http://localhost:8080/news 
  如果有history模式，需要后台做一些配置
  //Vue路由：实例化VueRouter 
const router = new VueRouter({
  mode: 'history',   //若是默认的hash模式，则mode不需要写
  routes //缩写，相当于 routes:routes
})

六、路由的嵌套

User.vue页面中有两个子页面
UserAdd.vue
UserList.vue

//路由的配置
import BYUser from '../BYUser.vue'
  import UserAdd from '../User/UserAdd.vue'
  import UserList from '../User/UserList.vue'

{path: '/user' , component:BYUser,
    children:[
      {path: 'useradd',component:UserAdd},
      {path: 'userlist',component:UserList}
    ]
},

//路由的跳转
<div>
    <div class="left">
        <ul>
            <li>
                <router-link to="/user/useradd"> 增加用户 </router-link>
            </li>
            <li>
                 <router-link to="/user/userlist"> 用户列表 </router-link>
            </li>
        </ul>
    </div>
    <div class="right">
        <router-view></router-view>
    </div>
</div>

七、登录及首页的路由配置说明
1.创建一个localstorage本地存储类storage.js，用来记录登录状态

var storage={
    set(key,value){
        console.log("storage---->")
        console.log(value)
        localStorage.setItem(key, JSON.stringify(value));
    },
    get(key){
        return JSON.parse(localStorage.getItem(key));
    },remove(key){
        localStorage.removeItem(key);
    }
}
export default storage;

2.创建一个自定义的路由表：router.js

import Vue from 'vue';
//引入路由
import VueRouter from 'vue-router'
Vue.use(VueRouter)

//设置路由表
const routes = [
 {
   path: '/',
   redirect: '/home'
 },
 {path: '/404', component: resolve => require(['../common/404.vue'],resolve)},
 {path: '/login', component: resolve => require(['../page/Login.vue'],resolve)},
 {path: '/home',component: resolve => require(['../page/Home.vue'],resolve),meta:{requireAuth:true}},//加上meta 表示需要登录才可进入
 {
   path:'*',
   redirect:'/404'
 }
]
//实例化路由并指定模式
const router = new VueRouter({
 /*默认是hash模式，路由上方的路径是用#表示，http://localhost:8080/#/news
 可以将hash模式改为history模式，路由上方的路径就没有了#,http://localhost:8080/news 
   如果有history模式，需要后台做一些配置
 */
   // mode:'history',
   routes //缩写，相当于 routes:routes
})
//暴露出去，供外部调用
export default router;

3.在main.js中配置钩子路由：

//引入自定义的路由表
import router from './components/router/router.js'
//引入localstorage本地存储管理
import storage from "./components/Tools/storage.js";
/**在路由跳转之前执行
 * to: 即将进入的路由对象
 * from: 当前导航即将离开的路由
 * next:Function,进行管道中的一个钩子，如果执行完了，则导航的状态就是 confirmed （确认的）；否则为false，终止导航。
 *  */
router.beforeEach((to, from, next) => { 
  //需要登录，但未登录者可以跳转到登录页面
  const isLogin = storage.get('login');
  if(!isLogin && to.meta.requireAuth){//未登录 且 需要登录(提前在路由表中加上meta）
    next({
      path:'/login'
    })
  }else{//其他
    next();
  }
});

4.登录及退出登录

    
登录：
    console.log("登录成功");
    let flag = true;
    storage.set('login',flag);//存储登录状态
    this.$router.push('/');//按路由规则跳转
退出登录：
    console.log("退出登录");
    let flag = false;
    storage.set('login',flag);//存储登录状态
    this.$router.push('/login');//按路由规则跳转
            

vue-Router实现原理

一、前端路由概念
通过改变 URL，在不重新请求页面的情况下，更新页面视图。

二、vue-Router两种模式
更新视图但不重新请求页面，是前端路由原理的核心之一，目前在浏览器环境中这一功能的实现主要有2种方式：

Hash — 默认值，利用 URL 中的hash("#") 、

history-- 利用URL中的路径（/home）

如何设置路由模式
 

const router=new VueRouter({
    mode:'history',
    routes:[...]
})

mode 区别：

1. mode:“hash” 多了 “#”

http://localhost:8080/#/login

1. mode:“history”

   http://localhost:8080/home
   

   三、HashHistory
   hash("#")的作用是加载 URL 中指示网页中的位置。# 号后面的 hash值，可通过 window.location.hash 获取

   特点：

   hash 不会被包括在 http 请求中，，对服务器端完全无用，因此，改变 hash 不会重新加载页面。

   可以为 hash 的改变添加监听事件：window.addEventListener("hashchange",funcRef,false)

   每一次改变 hash(window.localtion.hash)，都会在浏览器访问历史中增加一个记录。

   利用 hash 的以上特点，就可以来实现前端路由"更新视图但不重新请求页面"的功能了。

   HashHistory 拥有两个方法，一个是 push， 一个是 replace

   两个方法：HashHistory.push() 和 HashHistory.replace()
   1
   HashHistory.push() 将新路由添加到浏览器访问历史的栈顶

   

   
   从设置路由改变到视图更新的流程：

   $router.push() --> HashHistory.push() -->History.transitionTo() --> History.updateRoute() --> {app._route = route} --> vm.render()

   解释：

   $router.push() //调用方法
   HashHistory.push()//根据hash模式调用,设置hash并添加到浏览器历史记录（添加到栈顶）（window.location.hash= XXX）
   History.transitionTo() //监测更新，更新则调用History.updateRoute()
   History.updateRoute() //更新路由
   {app._route= route} //替换当前app路由
   vm.render() //更新视图

   HashHistory.replace()

   replace()方法与push()方法不同之处在于，它并不是将新路由添加到浏览器访问历史的栈顶，而是替换掉当前的路由

   

    

   四、HTML5History
   早期History通过back()、forward()、go()等方法，我们可以读取浏览器历史记录栈的信息
   从HTML5开始History提供了2个新的方法：pushState()、replaceState()
   使得我们可以对浏览器历史记录栈进行修改：

   window.history.pushState(data, title, targetURL);
   @状态对象：传给目标路由的信息,可为空
   @页面标题：目前所有浏览器都不支持,填空字符串即可
   @可选url：目标url，不会检查url是否存在，且不能跨域。如不传该项,即给当前url添加data
   1
   2
   3
   4
   window.history.replaceState(data, title, targetURL);
   @类似于pushState,但是会直接替换掉当前url,而不会在history中留下记录
   1
   2
   假定当前网址是example.com/1.html，使用pushState()方法在浏览记录（History 对象）中添加一个新记录。

   var stateObj = { foo: 'bar' };
   history.pushState(stateObj, 'page 2', '2.html');
   1
   2
   添加新记录后，浏览器地址栏立刻显示example.com/2.html，但并不会跳转到2.html，甚至也不会检查2.html是否存在，它只是成为浏览历史中的最新记录。

   这2个方法有个共同的特点：当调用他们修改浏览器历史栈后，虽然当前url改变了，但浏览器不会立即发送请求该url，这就为单页应用前端路由，更新视图但不重新请求页面提供了基础

   更多操作：
    

   history.pushState({page: 1}, 'title 1', '?page=1')
   // URL 显示为 http://example.com/example.html?page=1
   
   history.pushState({page: 2}, 'title 2', '?page=2');
   // URL 显示为 http://example.com/example.html?page=2
   
   history.replaceState({page: 3}, 'title 3', '?page=3');
   // URL 显示为 http://example.com/example.html?page=3
   
   history.back()
   // URL 显示为 http://example.com/example.html?page=1
   
   history.back()
   // URL 显示为 http://example.com/example.html
   
   history.go(2)
   // URL 显示为 http://example.com/example.html?page=3
   
   

   监听地址变化

   在HTML5History的构造函数中监听popState（window.onpopstate）

   popstate事件会在点击后退、前进按钮(或调用history.back()、history.forward()、history.go()方法)时触发。前提是不能真的发生了页面跳转,而是在由history.pushState()或者history.replaceState()形成的历史节点中前进后退
   注意:用history.pushState()或者history.replaceState()不会触发popstate事件。
    

   window.onpopstate = function(event) {
     console.log(event.state);
     console.log(window.history.state;);
   };
   

   以上两种方式皆可获取之前在pushState和replaceState中传入的data

   注意，页面第一次加载的时候，浏览器不会触发popstate事件。

   五、两种模式比较
   pushState设置的新URL可以是与当前URL同源的任意URL；而hash只可修改#后面的部分，故只可设置与当前同文档的URL

   pushState通过stateObject可以添加任意类型的数据到记录中；而hash只可添加短字符串

   pushState可额外设置title属性供后续使用

   history模式则会将URL修改得就和正常请求后端的URL一样,如后端没有配置对应/user/id的路由处理，则会返回404错误

2. <!DOCTYPE html>
   <html lang="en">
   
   <head>
       <meta charset="UTF-8">
       <title>pushState</title>
       <style type="text/css">
       .hidden {
           display: none;
       }
       </style>
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
   </head>
   
   <body>
       <section id="step1" class="step-contain" step="1">
           <p>第1步</p>
           <button class="step-btn" step="1">下一步</button>
       </section>
       <section id="step2" class="step-contain hidden" step="2">
           <p>第2步</p>
           <button class="step-btn" step="2">下一步</button>
       </section>
       <section id="step3" class="step-contain hidden" step="3">
           <p>第3步</p>
       </section>
       <script type="text/javascript">
       $(function() {
           stepProgress();
   
           function stepProgress() {
               var options = {
                   curStep: 1,
                   nextStep: null
               }
               var defaultState={
                   "step": options.curStep,
                    "url": "#step=" + options.curStep
               }
               window.history.pushState(defaultState, "", defaultState.url);
               $(".step-btn").on("click", function() {
                   var step = parseInt($(this).attr("step"));
                   options.nextStep = step + 1;
                   var state = {
                       "step": options.nextStep,
                       "url": "#step=" + options.nextStep
                   }
                   window.history.pushState(state, "", state.url);
                   console.log(state.step)
                   swapStaus(options.nextStep);
               });
   
               function swapStaus(step) {
                   $(".step-contain").each(function() {
                       var tmpStep = $(this).attr("step");
                       if (parseInt(tmpStep) == step) {
                           $("#step" + tmpStep).removeClass("hidden");
                       } else {
                           $("#step" + tmpStep).addClass("hidden");
                       }
                   });
                   options.curStep = step;
               }
   
               $(window).on("popstate",function(){
                   var currentState = history.state;
                   goStep=currentState.step?currentState.step:1;
                   swapStaus(goStep)
               })
           }
   
       })
       </script>
   </body>
   
   </html>
   

   代码：
    

一、要学习vue-router就要先知道这里的路由是什么？为什么我们不能像原来一样直接用标签编写链接哪？vue-router如何使用？常见路由操作有哪些？等等这些问题，就是本篇要探讨的主要问题

二、vue-router是什么

• 这里的路由并不是指我们平时所说的硬件路由器，这里的路由就是SPA（单页应用）的路径管理器。再通俗的说，vue-router就是WebApp的链接路径管理系统。
• vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。路由模块的本质 就是建立起url和页面之间的映射关系。
• 至于我们为啥不能用a标签，这是因为用Vue做的都是单页应用，就相当于只有一个主的index.html页面，所以你写的a标签是不起作用的，你必须使用vue-router来进行管理。
• 这里解释一下什么是SPA（单页应用）德路径管理器：SPA(single page application):单一页面应用程序，只有一个完整的页面；它在加载页面时，不会加载整个页面，而是只更新某个指定的容器中内容。单页面应用(SPA)的核心之一是: 更新视图而不重新请求页面。

三、vue-router实现原理

• vue-router在实现单页面前端路由时，提供了两种方式：Hash模式和History模式；根据mode参数来决定采用哪一种方式。

1、Hash模式：

• vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。 hash（#）是URL 的锚点，代表的是网页中的一个位置，单单改变#后的部分，浏览器只会滚动到相应位置，不会重新加载网页，也就是说 #是用来指导浏览器动作的，对服务器端完全无用，HTTP请求中也不会不包括#；同时每一次改变#后的部分，都会在浏览器的访问历史中增加一个记录，使用”后退”按钮，就可以回到上一个位置；所以说Hash模式通过锚点值的改变，根据不同的值，渲染指定DOM位置的不同数据
• （简单来说就是：Hash即地址栏URL中的 # 符号 hash虽然出现在URL中，但不会被包括在HTTP请求中，对后端完全没有影响，因此改变hash不会重新加载页面。）

2、History模式：

• 由于hash模式会在url中自带#，如果不想要很丑的 hash，我们可以用路由的 history 模式，只需要在配置路由规则时，加入"mode: ‘history’",这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

//main.js文件中
const router = new VueRouter({
 mode: 'history',
 routes: [...]

• 当你使用 history 模式时，URL 就像正常的 url，例如 http://yoursite.com/user/id，比较好看！
• 不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404，这就不好看了。
• 所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。

 export const routes = [ 
  {path: "/", name: "homeLink", component:Home}
  {path: "/register", name: "registerLink", component: Register},
  {path: "/login", name: "loginLink", component: Login},
  {path: "*", redirect: "/"}]

此处就设置如果URL输入错误或者是URL 匹配不到任何静态资源，就自动跳到到Home页面

• 简单来说就是： 我们经常使用的是History模式 前端的URL必须和实际向后端发起请求的URL一致 如果后端缺少对路由处理，将返回404错误

3、使用路由模块来实现页面跳转的方式

方式1：直接修改地址栏

方式2：this.$router.push(‘路由地址’)

方式3：<router-link to="路由地址"></router-link>

四、vue-router使用方式

1、下载 npm i vue-router -S

2、在main.js中引入 import VueRouter from ‘vue-router’;

3、安装插件 Vue.use(VueRouter);

4、创建路由对象并配置路由规则

let router = new VueRouter({routes:[{path:’/home’,component:Home}]});

5、将其路由对象传递给Vue的实例，options中加入 router:router

6、在app.vue中留坑

具体实现请看如下代码：

//main.js文件中引入
import Vue from 'vue';
import VueRouter from 'vue-router';
//主体
import App from './components/app.vue';
import Home from './components/home.vue'
//安装插件
Vue.use(VueRouter); //挂载属性
//创建路由对象并配置路由规则
let router = new VueRouter({
    routes: [
        //一个个对象
        { path: '/home', component: Home }
    ]
});
//new Vue 启动
new Vue({
    el: '#app',
    //让vue知道我们的路由规则
    router: router, //可以简写router
    render: c => c(App),
})

最后记得在在app.vue中“留坑”

//app.vue中
<template>
    <div>
        <!-- 留坑，非常重要 -->
        <router-view></router-view>
    </div>
</template>
<script>
    export default {
        data(){
            return {}
        }
    }
</script>

五、路由传参

路由传参有三种方式：

分别是query，params，动态路由传参

接收方式：

通过query方式传递过来的参数一般是通过this.$route.query接收
通过params方式传递过来的参数一般是通过this.$route.params接收
通过动态路由传参方式传递过来的参数一般是通过this.$route.params接收

六、路由导航守卫

路由导航守卫分三种

分别是：全局路由守卫、路由独享守卫、组件级的路由守卫

• 全局前置守卫 router.beforeEach 进入路由之前
• 全局解析守卫 router.beforeResolve
• 全局后置守卫 router.afterEach 进入路由之后就没有next参数

全局前置守卫

• 你可以使用 router.beforeEach 注册一个全局前置守卫：

const router = new VueRouter({ ... })

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

每个守卫都有三个参数：

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

• from: Route: 当前导航正要离开的路由

• next: Function: 钩子函数，里面定义参数，确认下一步路由要做什么

• next(’/’)或者 next({ path: ‘/’ }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，next({name: ‘home’}) 。

一般应用在用户未能验证身份时重定向到 /login ：

//全局前置守卫
router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  else next()
})

全局解析守卫

• 在 2.5.0+ 你可以用 router.beforeResolve 注册一个全局守卫。这和 router.beforeEach 类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用

全局后置钩子

• 守卫不同的是，后置钩子不会接受 next 函数也不会改变导航本身：

//全局后置钩子函数
router.afterEach((to, from) => {
  // ...
})

路由独享守卫

• 你可以在路由配置上直接定义 beforeEnter 守卫：

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      //路由独享守卫
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

• 路由独享守卫与路由全局前置守卫用法一样都有三个参数（to，from，next）

组件内的守卫

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

• 进入组件前的守卫 beforeRouteEnter
• 路由更新时的守卫 beforeRouteUpdate (2.2 新增)
• 离开组件时的守卫 beforeRouteLeave
• 下面请看代码实例：

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`
  }
}

• beforeRouteEnter 守卫 不能 访问 this，因为守卫在导航确认前被调用，因此即将登场的新组件还没被创建。

• 不过，你可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。

• 下面请看代码实例：

beforeRouteEnter (to, from, next) {
  next(vm => {
  vm.$store.state.token
    // 通过 `vm` 访问组件实例
  })
}

• 注意 beforeRouteEnter 是支持给 next传递回调的唯一守卫。对于 beforeRouteUpdate和beforeRouteLeave 来说，this 已经可用了，所以不支持传递回调，因为没有必要了。
• 下面请看代码实例：

beforeRouteUpdate (to, from, next) {
  // just use `this`
  this.name = to.params.name
  next()
}

• 这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消。
• 下面请看代码实例：

beforeRouteLeave (to, from, next) {
  const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
  if (answer) {
    next()
  } else {
    next(false)
  }
}

最后再说一下完整的导航解析流程：
1、导航被触发。
2、在失活的组件里调用 beforeRouteLeave 守卫。
3、调用全局的 beforeEach 守卫。
4、在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
5、在路由配置里调用 beforeEnter。
6、解析异步路由组件。
7、在被激活的组件里调用 beforeRouteEnter。
8、调用全局的 beforeResolve 守卫 (2.5+)。
9、导航被确认。
10、调用全局的 afterEach 钩子。
11、触发 DOM 更新。
12、调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。

理论：

路由原理

路由分为History模式和Hash模式 我们经常使用的是History模式 前端的URL必须和实际向后端发起请求的URL一致 如果后端缺少对路由处理，将返回404错误
Hash即地址栏URL中的 # 符号 hash虽然出现在URL中，但不会被包括在HTTP请求中，对后端完全没有影响，因此改变hash不会重新加载页面。

路由传参：

三种：
分别是query，params，动态路由传参
接收：
通过query方式传递过来的参数一般是通过this.$route.query接收
通过params方式传递过来的参数一般是通过this.$route.params接收
通过动态路由传参方式传递过来的参数一般是通过this.$route.params接收
路由守卫：

2.路由守卫使用的方式有几种？

全局的 单个路由独享的 组件级的

3.vue-router全局有三个守卫：

router.beforeEach 全局前置守卫 进入路由之前
router.beforeResolve 全局解析守卫(2.5.0+) 在beforeRouteEnter调用之后调用 router.afterEach 全局后置钩子 进入路由之后 没有next

组件内的守卫：

进组组件前的守卫 beforeRouteEnter 没有办法获取this，当前组件没有创建
路由更新时的守卫 beforeRouteUpdata(2.2新增)
离开组件时的守卫 beforeRouteLeave

3. 路由守卫钩子函数里面的三个参数分别是什么？

to,from,next 这三个参数：
to和from是将要进入和将要离开的路由对象,路由对象指的是平时通过this.$route获取到的路由对象。
next:Function 这个参数是个函数，且必须调用，否则不能进入路由(页面空白)。
next() 进入该路由。
next(false): 取消进入路由，url地址重置为from路由地址(也就是将要离开的路由地址)。 next 跳转新路由，当前的导航被中断，重新开始一个新的导航。

路由跳转方式 一共四种方式

1. router-link (不带参数)
2. this.$router.push() (函数里面调用)
3. this.$router.replace() (用法同push)
4. this.$router.go(n)

一、简介

Vue项目采用的是单页面应该(SPA)，即整个应用只有一个页面，通过路由来在单页面中进行组件的切换，从而改变页面展示的内容，而不发生页面的跳转。

二、路由的使用

2.1 安装插件
路由是一个插件，首先要安装插件。默认安装的是vue-router4版本，对应的是vue3版本。这里使用vue2，所以要指定版本安装，安装vue-router3版本。

npm i vue-router@3

安装成功后，可以在package.json文件里看安装版本：

2.2 定义路由路径
在src下创建router文件夹，定义index.js，里面配置路由映射路径：

//该文件用于创建整个应用的路由器
import VueRouter from 'vue-router'

//引入组件，这里引入需要配置跳转路径的组件，这种组件也称为路由组件
import HelloWorld from './components/HelloWorld.vue';
import HelloHello from './components/Demo.vue';

//创建一个路由器对象
const router= new VueRouter({
    routes:[//配置路由规则
        {
            path:'/HelloWorld', //组件的跳转路径
            component:HelloWorld  //要跳转的组件
        },
        {
            path: '/HelloHello',
            component: HelloHello
        }
    ]
})

//暴露路由器的对象
export  default router;

2.3 Vue实例引入路由器
在main.js中，引入VueRouter和上述定义的router对象

//引入VueRouter
import VueRouter from 'vue-router'

//引入路由器
import router from './router'

使用router插件：

Vue.use(VueRouter)

使用该插件后，Vue对象中，就可以定义router属性了，然后把暴露出来的router对象传进去。

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	router:router
})

2.4使用路由实现组件跳转切换
在切换组件的按钮处，用<router-link>标签包裹，to属性写index.js里配置的路由路径。实现点击内容，切换组件的效果，如下：

<router-link to="/HelloWorld">Hello</router-link><br>
<router-link to="/HelloHello">Demo</router-link>

在展示内容区域，用<router-view>占位，会自动在该区域展示组件内容:

 <router-view></router-view>

注意：一般称定义在<router-link>中的组件为路由组件。一般把路由组件都放在pages文件夹下。非路由组件放在components文件夹下。

2.5 知识升华
当使用vue-router插件后，所有的组件实例里，包括路由组件和非路由组件，都会有$router属性和$route属性。
$route属性每个组件都存着自己组件的路由信息，每个组件各不相同，如下图：

里面有fullPath属性，meta属性，params属性和query属性等多个属性。
$router属性全局都是一个同样的对象，它就是管理路由的路由器对象。

当<router-link>切换组件时，默认情况下，每次被切换的组件都会被销毁，重新切换回该组件时，再重新创建该组件。

三、多级路由

当路由组件内部，也要切换路由时，可以在路由文件中配置多级路由。配置规则如下：

在<router-link>跳转路径时，从父级路径开始写全路径:

<router-link to="/home/news">News</router-link>

四、路由传参

上面讲到，在每个组件的$route属性中，都有query属性和params属性，这两个属性是用于在组件跳转时，携带参数，给跳转到的组件传递数据用的。
4.1 query传参
第一种写法:
在<router-link>的to属性中，在路由路径后面直接加?，然后拼接key=value&key=value传递参数，类似于get请求传参。当传递的参数用到组件中的数据时，需要在to前面加:，相当于v-bind的简写。但是加了冒号后，to里面的全部内容都会当成js表达式来解析，而url的路径不是js表达式，这么写肯定会报错。所以需要用分隔符`来包裹url数据，然后用${}来获取组件中的数据，写法如下:

这样，切换到的组件的route属性的query里面，就有router-link中传递过来的参数了。

第二种写法：
router-link标签的to属性，写成对象的形式，如下：

写成对象的形式，path属性写路由的路径，query属性写传参。除了使用path属性外，还可以定义name属性，来与路由组件进行映射，此时，index.js的路由配置里也要写name属性。
需要注意的是，to属性写成对象后，query里的参数就无需写占位符了，直接写组件属性即可。
接收到数据后，vc实例就可以通过route.query.xxx来获取值了。

4.2 params传参
使用params传递参数，类似于resultful风格的url进行参数传递。
首先，在router/index.js里的路由路径里，写参数占位符，如下：

在<router-link>中传参时，用RestFul风格传参。如下：

注意:给params传参时，to属性里写成对象时，必须用name属性映射路由，不能用path属性映射

切换到组件后，组件的$route.params里就有参数了。
props属性
在配置params传参的配置文件中，可以配置props属性，这样，在接收参数的组件中，通过props属性就可以直接调用参数属性获取值了，无需再写复杂的route.params获取参数了，props配置如下：

五、路由的其他特性

5.1 <router-link>的replace属性
当路由组件进行切换时，浏览器默认把上一个组件当成了历史记录，点返回键，会调到上一个切换的组件页面，称之为push模式。如果不想跳到上一个组件中，那么把该组件的router-link的属性设置为true。浏览器就不会记录这个地址，也不会返回这个组件，而是返回上一个replace为false的组件中去。

5.2 编程式路由
所谓编程式路由，就是不通过router-link标签进行组件的切换，而是通过代码方式进行组件切换。

5.3 缓存路由组件
上面讲到，当切换组件时，被切换的组件会被销毁，每次切换，都涉及到组件的销毁和重新创建，如果不想让组件重新销毁，比如用户在组件中输入了一些数据，等切换回来时，这些数据还要在页面保留，那么就不能进行销毁。
需要进行特殊的设置，即在<router-view>占位符处，用<keep-alive>标签包裹。用include属性设置不被销毁的组件，写组件name属性。
一个组件时：

多个组件时:

5.4路由组件独有的两个生命周期
路由组件有两个新的生命周期，
activated:路由组件被激活时触发
deactivated:路由组件失活时触发。

5.5 路由的meta属性
在路由配置文件index.js中配置路由时，可以设置meta属性，来自定义一些信息。通常自定义一些标识信息，然后在路由守卫中，获取这些标识，进而判断是否放行等操作。
5.6 路由的hash模式和history模式
路由配置中，可以配置mode属性，默认是hash模式，这种模式下，浏览器的地址栏中，会有#。#后面的路径，都是vue项目内部跳转的路径，其不会传到服务器后台，#及#后面的路径，称之为hash路径。
mode属性可以设置为history，这样，浏览器地址栏中就没有#了。这种模式的弊端是，vue内部跳转的路径，也会发送给服务器后台，这样就会造成后台服务器返回404错误，因为vue内部跳转的路径，后台服务解析。这就需要后台服务进行一些处理了。

六、路由守卫

相当于访问某个路由组件时，给路由组件加了一个拦截器，这个拦截器就叫守卫。
全局前置守卫
在访问每个路由前，执行的一段代码，写法如下：
在router/index.js里，定义完router对象后，定义beforeEach函数：

// 前置路由守卫（路由导航）
router.beforeEach((to, from, next) => {
     console.log('to:', to)
     console.log('from:', from)
    if (to.path == '/home') {
        console.log('做逻辑判断')
    }
    // 下方这个next是适配所有路由的，放行操作，如果没有next，则会卡住，不会跳转进路由组件
    next()
})

beforeEach函数的调用时机：初始化时调用一次，以及每次路由切换时，调用一次。
全局后置守卫
在router/index.js里定义完router对象后，调用afterEach函数，定义全局后置守卫:

// 进入路由后方法勾子
router.afterEach((to, from) => {
    console.log(to, '后置第一个参数')
    console.log(from, '后置第二个参数')
    /*
      to 目标路由
      from 源路由
    */
    if (to.meta.title) {
        console.log(to.meta.title);
    } else {
        console.log('暂无名称');
    }
});

调用时机：初始化时调用一次，以及每个路由切换后，调用一次。
后置全局路由不用放行，没有next参数。

独享守卫
写在路由配置文件的某个组件内，而不是写在router定义完后。与前置守卫类似，但是只拦截某一个路由。

{
            path: '/HelloHello',
            component: HelloHello,
            beforeEnter(to,from,next){
                if(to.path==="/test"){
                    alert("请登录");
                    next(false); // 禁止跳转
                }else{
                    next()
                }
            }
        }

独享守卫只有前置拦截，没有后置拦截。

组件内守卫
不在路由的js里写，而在组件内部写的路由，包括beforeRounterEnter和beforeRouterLeave属性
通过路由规则，进入该组件时调用和通过路由规则，离开该组件时被调用。
与上述讲到的activated和deactivated类似，不同的是，组件内守卫必须通过路由规则进入时才会进入beforeRounterEnter和beforeRouterLeave，而直接写组件标签调用的方式进入组件不会走这两个方法。