Vue Router

Posted 2021-09-06 HUMILITY

VueRouter

• 安装vue-router

• npm install vue-router --save

• 搭建框架

• 在模块化工程中使用它（因为是一个插件，所以可以通过Vue.use()来安装路由功能）

  • 第一步：导入路由对象，并且调用Vue.use(VueRrouter)
  • 第二步：创建路由实例，并且传入路由映射配置
  • 第三步：在Vue实例中挂载创建的路由实例
• 在src文件夹下手动创建router文件夹
• router文件夹内创建index.js

• index.js中编写

            //配置路由相关的信息 搭建框架
                import VuRouter from \'vue-router\'
                import Vue from \'vue\'
            
            //1.通过Vue.use(插件)，安装插件
            Vue.ues(VueRouter)
            
            //2.创建VueRouter对象
            const routes = [
                
            ]
            const router = new VueRouter({
                //配置路径和组件之间的应用关系
                routes:
            })将router对象传入到vue实例
            export default router
            
            //3.
                //将router对象传入到实例中
                //在main.js实例中
                import router from \'路径\'
                router: router
  

使用vue-router的步骤

• 创建路由组件/在components文件夹内

• 配置路由映射：组件和路径映射关系

  • 在index.js文件中

            //导入components中相关组件
            import Home from \'组件路径\'
            import Home from \'组件路径\'
            

            
            const routes = [
                {path:\'/home（可换）\',
                component:null    //一个映射关系就是一个对象
                },
                {
                path:\'/about（可换）\',
                component:null
                }
            ]

• 使用路由：通过<router-link>和<router-view>

  • 在app.vue 中 写

  • <router-link>相当于a标签

            <router-link to="home">首页</router-link>

  • <router-view>相当于将内容显示在link上面或者下面

• 路由的默认路径

  • 让路径默认跳进首页并且可以被渲染

  • 只要在多配置一个映射就可以了

            const routes = [
                    {
                    path:\'/\',
                    redirect:\'/home\'
                    }
            ]
            //在route中又配置了一个映射
            pa/th配置的是根路径
            redirect是重定向，也就是我们将根路径重定向到/home的路径下，这也就可以得到想要的结果了
    

    
    ​        

router-link补充

• tag：tag可以指定<router-link>之后渲染成什么组件。<router-link to/\'home\' tag=\'button\'>将会被渲染成button按钮就
• replace：replace不会留下history记录，所以指定replace的情况下，后退键返回不能返回到上一个页面

• active-class：当<router-link>对应的路由匹配成功时，会自动给当前元素设置一个router-link-active的class，设置active-class可以修改默认的名称

  • 在进行高亮显示的导航菜单或者底部tabbar时，会使用到该类
  • 但是通常不会修改类的属性，会直接使用默认的router-link-active

通过代码跳转路由

this.$router.push(\'/home\')

路由懒加载

• 用到时再加载
• 当打包构建应用时，javascript包会变得非常大，影响页面加载
• 如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了
• 路由懒加载的主要作用就是将路由对应的组件打包成一个个的js代码块
• 只有在这个路由被访问到的时候，才加载对应的组件

• 懒加载的方式

  • 方式一：结合Vue的异步组件和Webpack的代码分析

            const Home = resolve => { require.ensure([\'../components/Home.vye\'],() => {
            resolve(require(\'../components/Home.vue\'))
            })};    //老版

  • 方式二：AMD写法

            const About = resolve => require([\'../components/About.vue\'], resolve);
            

• 方式三：ES6中，更加简单的写法来组织Vue异步组件和Webpack的代码分割

          const Home = () => import(\'../components/Home.vue\')
          

路由的嵌套使用

• 嵌套路由是一个很常见的功能

  • 比如在home页面中，我们希望通过/home/news和/home/message访问一些内容
  • 一个路径映射一个组件，访问这两个路劲也会分别渲染两个组件

• 实现嵌套路由有两个步骤：

  • 创建对应的子组件，并且在路由映射中配置对应的子路由
  • 在组件内部使用<router-view>标签

            //创建组件，比如news，message（内容显示在首页里）
            //打开index.js
            const HomeNews = () => import(\'../components/HomeNews\')
            const HomeMessage = () => import(\'../components/HomeMessage\')
                
                
            const routes = [
                path: \'/home\',
                children; [
                    {
                        path:\'news\'        //子路由不需要加‘/’
                        component:HomeNews
                    },
                    {
                        path:\'Message\'        //子路由不需要加‘/’
                        component:HomeMessage
                    }
                ]
            ]
            
            
            //打开Home.vue
            <router-link to="/ome/news">新闻</router-link>
            <router-link to="/home/message">新闻</router-link>
            
            <router-view></router-view>
            

参数传递

• 传递参数主要有两种类型：params和query

• params的类型

  • 配置路由格式：/router/:id
  • 传递的方式：在path后面跟上对应的值
  • 传递后形成的路径：/router/123, /router/abc

• query的类型

  • 配置路由格式：/router，也就是普通配置
  • 传递的方式：对象中使用query的key作为传递方式
  • 传递后形成的路径：/router？id=123，/router?id=abc
• 使用：<router-link>的方式和Javascript代码方式

导航守卫

            router.beforeEach((to,from,next)) => {
            document.title = to.matched[0].meta.title
            console.log(to)
            next()
            }
            
            

keep-alive

• keep-alive是Vue内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染
• router-view也是一个组件，如果直接被包在keep-alive里面，所有路径匹配到的视图组件都会被缓存
• 用法：包含住<router-view>

• keep-alive是Vue内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染

  • 它们有两个非常重要的属性：
  • include - 字符串或正则表达，只有匹配的组件会被缓存
  • exclude - 字符串或正则表达式，任何匹配的组件都不会被缓存 <keep-alive exclude="Home,User"> //不能随便加空格
• router-view也是一个组件，如果直接被包在keep-alive里面，所有路径匹配到的视图组件都会被缓存