vue-痴汉的路引-路由

vue-痴汉的路引-路由

**前言：本文仅用供学习之后理清知识点查看，详细知识点建议访问官方网站：**https://router.vuejs.org/

1.SPA概念

vue-router

• 开始

  const Foo = { tempalte: '<div>foo</div>'}
  const Bar = { template: '<div>bar</div>'}
  
  const routes = [
  	{path: '/foo', component: Foo },
  	{path: '/bar', component: Bar }
  ]
  const router = new VueRouter({
  	routes //（缩写）相当于 routes:routes
  })
  
  // APP.vue 留有<route-view>为页面插入位置
  

• 动态路由匹配

• 嵌套路由

• 编程式导航（js跳转）vs 声明式

  • 路径

    //点击事件
    this.$router.push(`/detail/${id}`)
    

    // index.js
    {
      path: '/detail/:myid',
      component: Detail,
    },
    

    // 跳转页面通过 this.$route.params.myid 获取id
    

  • 路由名字

    // 点击事件
    this.$router.push({
       name: 'huang',
       params: {
          myid: id
       }
    })
    

    // index.js
    {
      path: '/detail/:myid',
      component: Detail,
      name: 'huang'
    },
    

    // 跳转页面通过 this.$route.params.myid 获取id
    

  • query方式跳转详情

    // 点击事件
    this.$router.push(`/detail?id=${id}`)
    

    // index.js
    {
      path: '/detail',
      component: Detail
     },
    

    // 跳转页面通过 this.$route.query.id 获取id
    

• 命名路由（$route.name获取命名路由的名字）

• 重定向和别名

  const router = new VueRouter({
  	routes:[
  		{path:'/a',redirect:'/b'}
  	]
  })
  

  const router = new VueRouter({
  	routes:[
  		{path:'/a',comppnent: A, alias: '/b'}
  	]
  })
  

• HTML5 History模式

  vue支持两种模式

  • hash #/home
  • history /home

• 路由守卫&路由拦截

  • 全局拦截

    router.beforeEach((to, from, next) => {
      const auth = ['/center', '/order', '/money', '/card']
    
      if (auth.includes(to.fullPath)) {
        if (!localStorage.getItem('token')) {
          next('/login')
        } else {
          next()
        }
      } else {
        next()
      }
    })
    

  • 单个拦截

    // 在需要验证的页面里
    beforeRouteEnter (to, from, next) {
           
        if (!localStorage.getItem('token')) {
           
          next('/login')
        } else {
           
          next()
        }
      }
    

• 路由懒加载

  const Foo = () => import('./Foo.vue')
  

  在路由配置中什么都不需要改变，只需要像往常一样使用Foo：

  const router = new VueRouter({
  	routes: [
  		{ path: '/foo', component: Foo }
  	]
  })
  
  

反向代理

官方文档：https://cli.vuejs.org/zh/config/#devserver

在vue.config.js中配置

module.exports = {
    devServer: {
        proxy: {
            "/ajax":{
                target: "https://m.maoyan.com",
                changeOrigin: true
            }
        }
    }
}