Vue-router认识路由前端渲染与后端渲染url的hash和HTML5的historyvue-router的基本使用路由的懒加载vue-router嵌套路由Vue-router参数传递Vue-router导航守卫keep-alive

Vue-router

认识路由

1. 概念

   路由(routing)就是通过互联的网络把信息从源地址传输到目的地址的活动

2. 路由器提供了两种机制：路由和转送

   1. 路由是决定数据包从来源到目的地的路径

   2. 转送将输入端的数据转移到合适的输出端

3. 路由表

4. 路由表本质上就是一个映射表，决定了数据包的指向

前端渲染与后端渲染

1. 区别

2. 后端路由

   1. 后端处理URL与页面间的映射关系

3. 前后端分离

   1. 后端只负责提供数据，不负责任何界面的内容

   2. 前端渲染：浏览器中显示的网页中的大部分内容，都是由前端写的js代码在浏览器中执行，最终渲染出来的网页

   3. 后端只提供 API来返回数据，前端通过Ajax返回数据，通过js将数据渲染到页面中

4. 单页面富应用(SPA页面)

   1. 在前后端分离基础上，又加上了一层前端路由。区别

   2. 整个网页只有一个html页面

   3. 改变url，但是页面不进行整体的刷新

url的hash和HTML5的history

1. url的hash

   1. url的hash也就是锚点(#),本质上是改变window.location的href属性

   2. 可以通过直接赋值location.hash来改变href，但是页面不发生刷新

   3.  location.hash = "aaa"
       url变为"localhost:8080/aaa"</pre>
      

2. HTML5的history模式

   1. pushState

       history.pushState({},'',home)   // localhost:8080/home
       history.pushState({},'',about)   // localhost:8080/about
       history.pushState({},'',mine)   // localhost:8080/mine
       //以上相当于入栈
       history.back() //后退，相当于出栈
       history.forward() //前进，相当于压栈</pre>
      

   2. replaceState(): 替换url，back方法失效

vue-router的基本使用

1. 安装

   npm install vue-router --save

2. 使用

   1. 导入路由对象，并且调用Vue.use(VueRouter)

   2. 创建路由实例，并传入路由映射配置

   3. 在Vue实例中挂载创建的路由实例

3. 配置路由映射关系

   1. 创建路由组件

   2. 配置url和组件的映射关系

   3. 使用路由，通过<router-link> 和 <router-view>

      <router-link to="/home"></router-link>
       <router-link to="/about"></router-link>
       <router-view></router-view></pre>
      

4. 路由的默认路径

    path: '',
    redirect: '/home'
   }]
   

5. 默认是hash模式，可以修改成history模式

     routes;
     mode: 'history'
    })
   

6. router-link的属性

   1. to：由于指定跳转的路径

   2. tag：默认router-link会渲染成a标签，如果想渲染成别的标签，则可以使用此属性

   3. replace：replace不会留下history记录，前进后退无法使用，相当于replaceState()

   4. active-class: 激活的router-link默认会有一个router-link-active的类，如果不想使用默认类，则可以使用这个属性

   5.  //如果修改active-class，如果有多个router-link可能需要多处修改，也可以修改一个地方
       const router = new VueRouter({
        routes;
        mode: 'history',
        linkActiveClass: 'active'
       })
      

7. 通过代码修改路由 this.$router.push('/home') 可以使用返回前进按钮 this.$router.replace('/home') 前进后退不能用

8. 动态路由

   export default {
    name: '#app',
    data(){
    return {
    userId: 'zhangsan'
    }
    }
   }
   {
    path: '/user/:userId',
    component: User
   }
   //获取参数
   this.$route.params.userId
   {{$route.params.userId}}
   

路由的懒加载

1. npm run build后生成3个js文件 app.js manifest.js vender.js

   app.js中是自己写的业务代码

   manifest.js是为了打包的代码做底层支撑

   vender.js中的是使用的第三方包

2. 为什么要懒加载？

   1. 打包构建应用时，js文件比较大，会影响页面加载

   2. 如果能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样更加高效

3. 如何进行路由懒加载

   import Home from '@/components/Home'
   import About from '@/components/about'
   Vue.use(VueRouter)
   const routes = [
    {
    path: '/home',
    component: Home
    },
    {
    path: '/about',
    component: About
    }
   ]
   ​
   //使用路由懒加载
   const Home = ()=>import('@/components/Home')
   const About = ()=>import('@/components/About')
   const routes = [
    {
    path: '/home',
    component: Home
    },
    {
    path: 'about',
    component: About
    }
   ]
   

vue-router嵌套路由

1. 什么是嵌套路由？

   1. 比如在Home页面，希望通过/home/news和/home/message访问一些内容

   2. 一个路径映射一个组件，访问这两个路径也会分别渲染两个组件

2. 如何实现嵌套路由？

   1. 创建对应的子组件，并在路由映射中配置对应的子路由

   2. 在组件内部使用<router-view>标签

     {
     path: '/home',
     component: Home,
     children: [
     path: 'news',  //前面不要加/
     components: News
     ]
     }
    ]
   

Vue-router参数传递

1. 传递参数主要有两种类型params和query

   1. params的类型

      1. 配置路由格式：/router/:id

      2. 传递的方式：在path后面跟上对应的值

      3. 传递后形成的路径：/router/123, /router/abc
         <router-link :to="'/profile' + userId"></router-link>

   2. query的类型

      1. 配置路由格式：/router

      2. 传递的方式：对象中使用query的key作为传递方式

      3. 传递后形成的路径：/router?id=123, /router?id=abc

            <h2>{{$route.query.name}}</h2>  //取参
   

Vue-router导航守卫

1. 什么是导航守卫？

   1. vue-router提供的导航守卫主要用来监听路由的进入和离开

   2. vue-router提供了beforeEach和afterEach的钩子函数，他们会在路由改变前和路由改变后触发

2. 一个小需求，根据路由的变化修改title值

      path: '/home',
      component: Home,
      children: [...],
      meta: {
      title: '首页'
      },
      path: '/about',
      component: About,
      meta: {
      title: '关于
      }
     ]
     ​
     const router = new VueRouter({
      routes,
      mode: 'history',
      linkActiveClass: 'active
     })
     //前置守卫， 必须调用next方法  全局守卫
     router.beforeEach((to, from, next)=>{
      document.title = to.meta.matched[0].title
      next()
     })
     /*
     导航钩子的三个参数：
     to: 即将要进入的目标的路由对象
     from: 当前导航即将要离开的路由对象
     next: 调用该方法后，才能进入下一个钩子 */
     router.afterEach((to, from)=>{})

3. 除了全局守卫，还有路由守卫和组件内守卫

   1.   const routes = [
         {
         path: '/home',
         component: Home,
         beforeEnter(to, from ,next){
         }
         }
        ]
      

keep-alive

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

  • include- 字符串或正则表达式， 只有包含的组件会被缓存

  • exclude- 字符串或正则表达式， 排除的组件不会被缓存

  •  <keep-alive exclude="User, About">
      <router-view/>
     </keep-alive>
    

• router-view也是一个组件，如果直接被包含在keep-alive里面，所有路径匹配到的试图组件都会被缓存

• 只有被keep-alive包围时，actived和deactived方法才会被调用