vue-router

了解

vue插件库，用来实现SPA应用（单页面）

整个页面只有一个完整的页面

点击页面中导航链接，不会刷新页面，只做局部更新

数据通过ajax请求

路由的理解

1. 一组映射关系（key-value）
2. key：路径，value：function或component

前端路由

value是compoent，展示页面内容。

当浏览器路径改变时，展示对应的组件

后端路由

value是function，处理客户端提交的请求。

服务器接收到请求，根据请求路径找到匹配的函数来处理请求，返回响应数据

基本路由

安装vue-router

npm i vue-router@3.5.3

配置路由

|-src|--router|---index.js===================================import VueRouterfrom'vue-router';import Aboutfrom"../components/About";import Homefrom"../components/Home"exportdefaultnewVueRouter({
    routes:[{
            path:'/about',
            component: About},{
            path:'/home',
            component: Home},]})==============================================
#main.jsimport Vuefrom'vue'import Appfrom'./App.vue'import VueRouterfrom'vue-router'import routerfrom'./router'

Vue.config.productionTip=false
Vue.use(VueRouter)newVue({render:h=>h(App),
    router: router,}).$mount('#app')

#App.vue
========================================<template><div><divclass="row"><Banner/></div><divclass="row"><divclass="col-xs-2 col-xs-offset-2"><divclass="list-group">
            #实现切换active-class可配置被选中的样式<router-linkclass="list-group-item"active-class="active"to="/about">About</router-link><router-linkclass="list-group-item"active-class="active"to="/home">Home</router-link></div></div><divclass="col-xs-6"><divclass="panel"><divclass="panel-body">
              #指定展示位置<router-view></router-view></div></div></div></div></div></template><script>import Bannerfrom"./components/Banner";exportdefault{
  name:'App',
  components:{
    Banner}}</script>

#Home.vue,About.vue,Banner.vue<template><div><h2>我是About的内容</h2></div></template><script>exportdefault{
        name:"About"}</script>
=============================================<template><div><h2>我是Home的内容</h2></div></template><script>exportdefault{
        name:"Home"}</script>
================================<template><divclass="col-xs-offset-2 col-xs-8"><divclass="page-header"><h2>Vue Router Demo</h2></div></div></template><script>exportdefault{
        name:"Banner"}</script>

注意⚠️

1. 路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹
2. 通过切换，“隐藏”了的路由组件，默认是被销毁的，需要的时候再去挂载
3. 每个组件都有自己的$route属性，存储自己的路由信息
4. 整个应用只有一个router，可通过组件的$router属性获取

嵌套路由

配置多级路由

import VueRouterfrom'vue-router';import Aboutfrom"../pages/About";import Homefrom"../pages/Home"import Messagefrom"../pages/Message";import Newsfrom"../pages/News";exportdefaultnewVueRouter({
    routes:[{
            path:'/about',
            component: About},{
            path:'/home',
            component: Home,
            children:[{
                    path:'message',//不能写成“/message”
                    component: Message},{
                    path:'news',//不能写成“/news”
                    component: News}]},]})

跳转（要写完整路径）

<template><div><h2>我是Home的内容</h2><ulclass="nav nav-tabs"><li><router-linkclass="list-group-item"active-class="active"to="/home/news">News</router-link></li><li><router-linkclass="list-group-item"active-class="active"to="/home/message">Message</router-link></li></ul><router-view></router-view></div></template><script>exportdefault{
        name:"Home"}</script>

路由传参

query参数

<!--                路由跳转，携带参数，to的【字符串】写法--><router-link:to="`/home/message/detail?id=${item.id}&title=${item.title}`">{{item.title}}</router-link><!--                路由跳转，携带参数，to的【对象】写法--><router-link:to="{
     path:'/home/message/detail',
     query: {
               id:item.id,
               title:item.title,
            }
    }">{{item.title}}</router-link><script>data(){return{
                messageList:[{id:'001', title:'消息1'},{id:'002', title:'消息2'},{id:'003', title:'消息3'},]}}</script>
#接收参数<li>消息编号：{{$route.query.id}}</li><li>消息内容：{{$route.query.title}}</li>

命名路由

使用name，跳转地址只能使用to的对象写法，用name属性。否则会被解析成path路径

????:to=“xiangqiang”

<router-link:to="{
                    //path:'/home/message/detail',
                    name:'xiangqing', //使用name简化
                    query: {
                        id:item.id,
                        title:item.title,
                    }
                }">{{item.title}}</router-link><script>
    routes:[{
            path:'/home',
            component: Home,
            children:[{
                    path:'message',
                    component: Message,
                    children:[{
                            name:'xiangqing',//给路由命名
                            path:'detail',
                            component: Detail,}]},]},]</script>

params参数

restful风格

⚠️使用params参数,to的对象写法,不能使用path属性,只能使用name属性

<router-link:to="`/home/message/detail/${item.id}/${item.title}`">{{item.title}}</router-link><router-link:to="{
                    // path:'/home/message/detail',
                    name:'xiangqing',
                    params: {
                        id:item.id,
                        title:item.title,
                    }
                }">{{item.title}}</router-link>
===================================================
#route -> index.js<script>
children:[{
                            name:'xiangqing',
                            path:'detail/:id/:title',//占位符接收params参数
                            component: Detail,}]</script>
#接收参数<li>消息编号：{{$route.params.id}}</li><li>消息内容：{{$route.params.title}}</li>

props配置

使路由组件更方便的收到参数

#route-> index.js======================================{
     path:'message',
     component: Message,
     children:[{
              name:'xiangqing',
              path:'detail',
              component: Detail,//第一种写法:props值为对象,该对象中所有的key-value会通过props传给Detail组件
              props:{a:334},//第二种:props值为布尔值,则把路由收到的所有params参数通过props传给Detail组件
              props:true//第三种:props值为函数,该函数返回的对象中每一组key-value都会通过props传给Detail组件props($route){return{
                           id:$route.query.id,
                            title:$route.query.title,}}}]}=====================================
#Message.vue<router-link:to="`/home/message/detail?id=${item.id}&title=${item.title}`">{{item.title}}</router-link>=====================================
#Detail.vue<template><ul><li>消息编号：{{id}}</li><li>消息内容：{{title}}</li></ul></template><script>exportdefault{
        name:"Detail",
        props:['id','title']}</script>

router-link的replace属性

控制路由跳转时操作浏览器历史记录的模式

1. push:追加历史记录(默认)
2. replace:替换当前记录

开启

<router-link:replace="true"class="list-group-item"active-class="active"to="/about">About</router-link>
==============或者简写<router-linkreplaceclass="list-group-item"active-class="active"to="/about">About</router-link>

编程式路由导航

不借助<router-link>实现路由跳转

<button@click="push(item)">push</button><button@click="replace(item)">replace</button><script>
methods:{push(item){//参数和to里面的cathis.$router.push({
                    name:'xiangqing',
                    query:{
                        id: item.id,
                        title: item.title,}})},replace(item){this.$router.replace({
                    name:'xiangqing',
                    query:{
                        id: item.id,
                        title: item.title,}})}}</script>
========================================<button@click="back">后退</button><button@click="forward">前进</button><button@click="go">前进</button><script>
methods:{back(){this.$router.back();},forward(){this.$router.forward()},go(){this.$router.go(-1)}}</script>

缓存路由组件

让不展示的路由组件保持挂载，不被销毁！

<keep-alive include="News">//include里面是【组件名】，不写默认对此处所有的路由生效<router-view></router-view></keep-alive>//缓存多个路由组件<keep-alive:include="['News','Message']">

路由独占的生命周期钩子

捕获路由组件的激活状态

activated 路由组件被激活时触发
deactivated 路由组件失活时触发

如果想要在被缓存数据的路由1组件中，激活一个定时器。当切走的时候，由于组件未被销毁，定时器还会执行，可使用deactivated销毁定时器

路由守卫-全局前置

对路由进行权限控制

1. 全局守卫
2. 独享守卫
3. 组件内守卫

全局守卫

const router=newVueRouter({...})//初始化时、每次路由切换之前被调用
router.beforeEach((to,from, next)=>{if(to.meta.isAuth){
        console.log(to,from)}else{next()}})//初始化时、每次路由切换之后被调用
router.afterEach((to,from)=>{
    document.title= to.name+from.name})exportdefault router

独享守卫

beforeEnter(to,