Vue路由（vue-router）

一、Vue路由的相关概念

       1、路由（routing）：是指从源到目的地时，决定端到端路径的决策过程。

       2、前端路由：即由前端来维护一个路由规则。实现模式有两种。

           (1)利用URL的Hash模式：就是常说的锚点，JavaScript通过hashChange事件来监听URL的改变。(IE7及以下版本需要使用轮询)

           (2)利用HTML5的History模式：它使用URL看起来像普通网站一样，以”/”分割，没有”#”,但是页面并没有跳转。这种模式需要服务器端支持，服务端在接收到所有的请求后，都指向同一个HTML文件,不然会出现页面错误

      3、VueRouter路由：路由就是根据一个请求路径选中一个组件进行渲染的决策过程。Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。

            route：首先它是个单数，译为路由，可以理解为单个路由或者某一个路由；例如Home按钮  => home内容， 这是一条route,  about按钮 => about 内容， 这是另一条路由。

            routes：它是个复数，表示多个的集合才能为复数；可以理解为多个路由的集合，官方定义routes是一个数组；所以routes表示多个路由(route)的集合；

            router：译为路由器，上面都是路由，这个是路由器，可以理解为一个容器包含上述两个或者说它是一个管理者，负责管理上述两个；举个常见的场景的例子：当用户在页面上点击按钮的时候，这个时候router就会去routes中去查找route，就是说路由器会去路由集合中找对应的路由；

            VueRouter包括三个主要组成部分 —— VueRouter、router-view和 router-link

                

                        VueRouter ：路由器类，根据路由请求在路由视图中动态渲染选中的组件

                        router-link ：路由链接组件，声明用以提交路由请求的用户接口

                        router-view：路由视图组件，负责动态渲染路由选中的组件          

              4、vue-router(4.0)的常用函数：

                       createRouter函数：创建路由器

                       createWebHashHistory函数：创建Hash模式

                       createWebHistory函数：创建History模式

例如：
const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    //...
  ],})

二、vue-router的基本应用(Vue3.0)

        1、安装vue-router

                    npm install vue-router

        2、创建路由配置文件

import {createRouter, createWebHashHistory} from "vue-router";
import Home from "@/components/Home";
import About from "@/components/About";
 
const routes= [
    {
        path: '/home',
        component: Home,
        name: 'home'
    },
    {
        path: '/about',
        component: About,
        name: 'about'
    }
]
const router = createRouter({
    routes,
    history:createWebHashHistory()
})
 
export default router;

         3、声明路由请求接口

              路由链接组件（router-link）为用户提供了提交路由请求的交互接口。 使用to属性来声明链接组件的目标路径。当用户点击链接组件时，组件向路由器提交向目标路径的路由请求。在模板中，使用<router-link> 标签声明路由链接元素。

               例如，下面的示例声明了一个目标路径为/about的路由链接：

                    <router-link to="/about">ABOUT</router-link>

         4、声明路由出口

              路由视图组件（router-view）为路由器（$router）提供了所选中组件的渲染出口。在模板中，使用标签<router-view>声明路由视图元素。

             例如，下面示例在模板中声明了一个路由视图：

                     <router-view></router-view>

             路由链接组件默认渲染为一个a元素，因此在视图DOM中，上面的模板对应于 DOM结构：

                      <a href="...">ABOUT</a>

          例如：在App.vue中配置：

<template>
    <div class="link">
       <router-link to="/home">Home</router-link>
         &nbsp; &nbsp; &nbsp; &nbsp;
       <router-link to="/about">About</router-link>
    </div>
    <img alt="Vue logo" src="./assets/logo.png">
    <router-view></router-view>
</template>

            在main.js文件中使用路由

            

 三、动态路由匹配

       1、什么是动态路由？

          是指路由器能够自动地建立自己的路由表,并且能够根据实际情况的变化适时地进行调整。可以在一个路由中设置多段“路径参数”，对应的值都会设置到$route.params中。例如：

        2、适用场景

          (1)比如一个网站或者后台管理系统中，在我们登录之后，通常会有一个欢迎回来，XXX之类的提示语，这个我们就可以通过动态路由来实现这个效果；

          创建user.vue组件

<template>
    <div>
        <h1>user</h1>
       <!-- 这里可以通过$route.params.name来获取路由的参数 -->
        <p>欢迎回来,{{$route.params.name}}</p>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                msg: "我是page1组件"
            }
        }
    }
</script>

          修改App.vue

<!-- 添加两个router-link标签 -->
    <div>
      <router-link to="/user/项羽">动态路由--项羽</router-link>
      <router-link to="/user/刘邦">动态路由--刘邦</router-link>
    </div>

          修改router.js

//引入user组件
import user from '../components/user'
//使用冒号标记，当匹配到的时候，参数值会被设置到this.$route.params中
    {
        path: '/user/:name',
        component: user
    }

        动态路由匹配给我们提供了方便，使得我们通过配置一个路由来实现页面局部修改的效果，给用户造成一种多个页面的感觉

       3、查询参数：URL中带有查询参数的形式（/book?Id=1），根据查询参数向服务器请求数据。在单页应用程序开发中，也支持路径中的查询参数。

      Book.vue

<template>
  <div>
    <p>图书ID: {{ $route.query.id }}</p>
  </div>
</template>
 
<script>
export default {
  name: "Book"
}
</script>

       App.vue

   

       4、通配符匹配：常规参数只会匹配以”/”分隔的URL片段中的字符。如果想匹配任意路径，可以使用通配符(*)。例如：

      {

          path: ‘*’  //将匹配所有路径

       }

      {

          path: ‘/user-*’ //匹配以/user-开头的任意路径

        }

      当使用通配符路由时，要确保路由的顺序时正确的，即含有通配符的路由应该放在最后。路由{ path: ‘*’ }通常用于客户端404错误

 四、嵌套路由

         比如当我们进入主页之后有分类，然后当选择其中一个分类之后进入对应的详情，这个时候我们就可以用到嵌套路由；官方文档中给我们提供了一个children属性，这个属性是一个数组类型，里面实际放着一组路由；这个时候父子关系结构就出来了，所以children属性里面的是路由相对来说是children属性外部路由的子路由；

         在asssets目录下新建一个book.js文件存放图书数据

export default [
    {
        id: 1,
        title: 'Vue.js无难事',
        desc: '前端框架经典图书'
    },
    {
        id: 2,
        title: 'React.js工程师宝典',
        desc: '前端框架经典图书'
    },
    {
        id: 3,
        title: 'Go语言程序设计',
        desc: '最流行的脚本语言'
    }
]

      Books.vue

<template>
  <div>
    <h3>图书列表</h3>
    <ul>
      <li v-for="book in books" :key="book.id" style="list-style-type: none">
        <router-link :to="'/books/book/' +book.id">{{ book.title }}</router-link>
      </li>
    </ul>
    <router-view></router-view>
  </div>
</template>
 
<script>
import Books from '@/assets/books'
export default {
  name: "Books",
  data() {
    return {
      books: Books
    }
  }
}
</script>
 
<style scoped>
 
</style>

        路由文件： index.js

import {createRouter, createWebHistory} from "vue-router";
const routes = [
    {
        path: '/books',
        name: 'books',
        component:  ()=> import('../components/Books'),
        children: [
            {
                path: '/books/book/:id',
                component: ()=> import('../components/Book')
            }
        ]
    }
]
 
export default createRouter({
    routes,
    history: createWebHistory()
})

           App.vue

        

五、命名路由

        有时通过一个名称来标识路由会更方便，特别是在链接到路由，或者是执行导航时。可以创建Router实例时，在routes选项中为路由设置名称

   修改上例：创建两个组件(News、Video)

   修改路由文件：router/index.js

import {createRouter, createWebHistory} from "vue-router";
const routes = [
    {
      path: '/',
      redirect: {
          name: 'news'
      }
    },
    {
        path: '/news',
        name: 'news',
        component: ()=> import('../components/News')
    },
    {
        path: '/books',
        name: 'books',
        component:  ()=> import('../components/Books'),
        children: [
            {
                path: '/books/book/:id',
                component: ()=> import('../components/Book')
            }
        ]
    },
    {
        path: '/video',
        name: 'video',
        component: ()=> import('../components/Video')
    }
]
 
export default createRouter({
    routes,
    history: createWebHistory()
})

          修改：App.vue

          注意：to属性的值是表达式，所以需要使用v-bind指令

六、命名视图

        即给<router-view>设置名称

        没有设置名称的<router-view>默认为default。可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。例如

        路由出口：

<router-view  name="header"></router-view>
 
<router-view  name="sidebar"></router-view>

      路由配置：          

routes: [
 
             path: '/',
 
             components: {
 
                  default: Main，
 
                  header：Header,
 
                  sidebar：Sidebar
 
             }
 
         ]

修改上例：Books.vue组件

 修改上例：router/index.js文件

五、路由导航两种方式：

        标签导航：标签导航<router-link>，<router-link>是通过转义为<a></a>标签进行跳转，其中router-link标签中的to属性会被转义为a标签中的href属性；

           //跳转到名为user路由，并传递参数userId

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

         编程式导航：我们可以通过this.$router.push()这个方法来实现编程式导航，当然也可以实现参数传递，这种编程式导航一般是用于按钮点击之后跳转

              this.$router.push({ name: 'user', params: { userId: 123 }})

  例如：修改上例路由文件router/index.js

 六、导航守卫：

   主要用于在导航的过程中重定向或者取消路由、或者添加权限验证、数据获取等业务逻辑。导航守卫分为三类：全局守卫、路由独享的守卫、组件内守卫，可以用于路由导航过程中的不同阶段。每一个导航守卫都有三个参数：to、from和next (router、afterEach除外)  

      1、全局守卫：分为全局前置守卫、全局解析守卫、全局后置钩子。

       (1)全局前置守卫：使用router.beforeEach注册。当一个导航触发时，全局前置守卫按照路由创建的顺序调用。

       在使用全局前置守卫时，要确保next函数的正确调用。例如：

       

router.beforeEach((to,from,next) => {
      if( !isAuthenticated){
         next(‘/login’)
      }else{
         next();
      }
})

示例：登录验证

    Login.vue

<template>
  <div>
    <div>
      <h3>用户登录</h3>
      <div>
          <label>
            用户名：
            <input type="text" v-model.trim="username"/>
          </label>
          <br><br>
          <label>
            密&nbsp;&nbsp;&nbsp;码：
            <input type="password" v-model.trim="password"/>
          </label>
          <br><br>
          <input type="submit" value="登录" @click.prevent="login"/>
      </div>
    </div>
    <h3>{{ info }}</h3>
  </div>
</template>
 
<script>
export default {
  name: "Login",
  data(){
    return {
      username: "",
      password: "",
      info: "" //用于保存登录失败后的提示信息
    }
  },
  methods: {
    login() {
      if ("lisi" == this.username && "12345" == this.password){ //用户名合法
        sessionStorage.setItem("isAuth",true); //写入session信息
        this.info = "";
        if (this.$route.query.redirect){ //如果存在查询参数
          let redirect = this.$route.query.redirect;
          this.$router.replace(redirect);
        }else{
          //否则跳转至首页
          this.$router.replace('/home')
        }
      }else{
        sessionStorage.setItem("isAuth",false);
        this.username = "";
        this.password = "";
        this.info = "用户名或密码错误"
      }
    }
  }
}
</script>

 路由配置文件router/index.js

import {createRouter,createWebHistory} from "vue-router";
 
import Login from "@/components/Login";
import Home from "@/components/Home";
const router = createRouter({
    history: createWebHistory(),
    routes: [
        {
            path: '/home',
            name: 'home',
            component: Home
        },
        {
            path: '/login',
            name: 'login',
            component: Login
        }
    ]
});
 
//前置路由守卫
router.afterEach((to,from,next)=>{
    //判断目标路由是否是'/login',如果是，则直接调用next()方法
    if (to.path == '/login'){
        next();
    }else{
        //否则判断用户是否已经登录
        if (sessionStorage.getItem('isAuth')){ //若用户已经登录，则执行next()跳转
            next();
        }else{
            /*若用户访问的是受保护的资源,且没有登录,则跳转到登录页面
              并将当前路由的完整路径作为查询参数传给Login组件,以便登录成功后返回先前的页面
             */
            next({
                path: '/login',
                query: {
                    redirect: to.fullPath
                }
            })
            console.log(to.fullPath)
        }
    }
})
export default router;

App.vue

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <router-link :to="{name: 'login'}" class="login">登录</router-link>
  <router-view></router-view>
</template>
 
<script>
export default {
  name: 'App',
  components: {
 
  }
}
</script>
 
<style>
  .login{
     display: flex;
     justify-content: center;
   }
</style>

App.vue

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <router-link :to="{name: 'login'}" class="login">登录</router-link>
  <router-view></router-view>
</template>
 
<script>
export default {
  name: 'App',
  components: {
 
  }
}
</script>
 
<style>
.login{
  display: flex;
  justify-content: center;
}
</style>

              (2)全局解析守卫：使用router.beforeResole注册。是在导航被确认之前，在所有组件内守卫和异步路由组件被解析之后被调用

              (3)全局后置钩子：使用router.afterEach注册。与守卫不同的是，全局后置钩子不接受next函数，也不会改变导航

          2、路由独享的守卫：是在routes配置的路由对象中直接定义的beforeEnter守卫。例如：

     3、组件内守卫：在组件内使用beforeRouteUpdate、beforeRouteEnter、beforeRouteLeave定义的守卫