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守卫。例如：