Vue Router

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

• 使用路由：通过和

  • 在app.vue 中 写

  • 相当于a标签

            首页

  • 相当于将内容显示在link上面或者下面

• 路由的默认路径

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

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

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

    
    ​        

router-link补充

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

• active-class：当对应的路由匹配成功时，会自动给当前元素设置一个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访问一些内容
  • 一个路径映射一个组件，访问这两个路劲也会分别渲染两个组件

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

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

            //创建组件，比如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
            新闻
            新闻
            
            
            

参数传递

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

• params的类型

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

• query的类型

  • 配置路由格式：/router，也就是普通配置
  • 传递的方式：对象中使用query的key作为传递方式
  • 传递后形成的路径：/router？id=123，/router?id=abc
• 使用：的方式和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里面，所有路径匹配到的视图组件都会被缓存
• 用法：包含住

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

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