Vue路由/路由守卫

一、前端路由和后端路由概念解释

    - 后端路由：对于普通的网站，所有的超链接都是url地址，所有url都对应服务器上对应的资源
    - 前端路由：对于单页面应用程序来说，主要通过url的hash（#）来实现不同页面的切换，同时hash还有一个特点HTTP请求 中不会包含hash相关的内容，所以单页面程序中的页面跳转主要用hash实现
    - 在单页面应用程序中这种通过hash来改变页面的方式称作前端路由区别于后端路由

二、路由的基本使用方式

    1.创建一个路由对象，当导入vue-router包之后，在window全局对象中就有一个路由的构造函数VueRouter
    2.在new路由对象的时候可以传递一个配置对象，这个配置对象的route表示路由器的匹配规则
    3.每个路由规则都是一个对象，这个规则对象身上必须有两个属性
          A:属性1 path 表示监听哪个路由链接地址
          B:属性2 component，表示如果路由是前面匹配到的path，则展示component属性对应的组件，component属性值必须是一个组件模板对象，不能是组件的引用名称

三、常见引入路由组件的方式和区别

// 第一种
import Home from './../views/Home.vue'
{
    path: '/',
    component: Home
},
// 第二种
{
    path: '/about',
    component: () => import('./../views/About.vue')
}
// 区别: 第二种方式起到懒加载作用(不调用不访问)

四、常见引入路由分类
1.动态路由

  // 动态路由
  {
    path: '/argument/:name',
    component: () => import('../views/Argument.vue')
  }
  // 获取动态路由的参数
  // {{ $route.params.name }} 注意:$route：当前加载页面的路由对象

2.嵌套路由

  // 嵌套路由
  {
    path: '/parent',
    component: () => import('../views/Argument.vue'),
    children: [
      {
        // 子嵌套路由会自动补全 "/"，所以不需要添加斜线
        path: 'child',
        component: () => import('@/views/Child.vue')
      }
    ]
  }

3.命名路由与别名

  {
    path: '/',
    name: 'home',
    alias: 'home_page',  
    component: Home
  }
 alias:别名，指的是home_page和home这两个名字指向的是同一个页面
 name:命名路由   

        <!-- 路径方式 -->
        <router-link to="/">Home</router-link>
        <!-- 命名路由的方法，此方法必须给路由命名(注意:name属性给值) -->
        <router-link :to="{ name: 'about' }">About</router-link>
        或者
        <router-link v-bind:to="{ name: 'about' }">About</router-link>
        简写方式(v-bind 简写)
        <router-link :to="about">About</router-link>
        <!-- 命名的路由 -->
        <router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
        <!-- 带查询参数，下面的结果为 /register?plan=private -->
        <router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>   

4.命名视图

 <!-- 默认的是default -->
 <router-view />
 <router-view name="email"/>

    {
        path: '/named_view',
        components: {
            default: () => import("@/views/Child.vue"),
            email: () => import("@/views/Email.vue")
         }
     }

5.Vue路由重定向

  {
    path: '/main',
    name: 'home',
    redirect: {
      name: 'home'
    },  
    redirect: to => {
        return {
            name: 'home'
        }  
     }
  }