Vue-Router学习记录

目录

一.使用路由

1.1配置路由

1.2采用路由

二.路由懒加载

三.路由重定向

四.嵌套路由

五.路由跳转

1.1标签式

1.2编程式

1.3路由的query参数

1.4命名路由 

1.5路由的 params 参数

1.6 路由的 props 配置

六.路由守卫

1.0简介：

1.1全局前置守卫(beforeEach)

1.2全局后置守卫(afterEach，少用)

1.3独享守卫(beforeEnter)略

1.4组件内部守卫(beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave)略

---

前言:

vue 属于单页面应用，所谓的路由，就是根据浏览器路径不同，用不同的视图组件替换这个页面内容展示

一.使用路由

1.1配置路由

新建一个路由index.js 文件，建立【路径】与【视图组件】之间的映射关系

import Vue from 'vue'
import VueRouter from 'vue-router'
import ContainerView from '@/views/example/ContainerView.vue'
import LoginView from '@/views/example/LoginView.vue'
import NotFoundView from '@/views/example/NotFoundView.vue'
 
Vue.use(VueRouter)
 
const routes = [
  {
    path:'/',
    component: ContainerView
  },
  {
    path:'/login',
    component: LoginView
  },
  {
    path:'/404',
    component: NotFoundView
  }
]
 
const router = new VueRouter({
  routes
})
 
export default router

注:@代表src下

1.2采用路由

在 main.js 中采用我们的路由 js,其实在引入时可以省略index，因为index是个特殊的东西，默认找不到就找index

import Vue from 'vue'
import App from './views/App.vue'
import router from './router/index'//引入路由
import store from './store'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
 
Vue.config.productionTip = false
 
Vue.use(Element)
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

根组件是App.vue,内容为：

起到占位作用，改变路径后，这个路径对应的视图组件就会占据 的位置，替换掉它之前的内容

二.路由懒加载

import Vue from 'vue'
import VueRouter from 'vue-router'
 
Vue.use(VueRouter)
 
const routes = [
  {
    path:'/',
    component: () => import('@/views/example/ContainerView.vue')
  },
  {
    path:'/login',
    component: () => import('@/views/example/LoginView.vue')
  },
  {
    path:'/404',
    component: () => import('@/views/example/NotFoundView.vue')
  }
]
 
const router = new VueRouter({
  routes
})
 
export default router

• 静态导入是将所有组件的 js 代码打包到一起，如果组件非常多，打包后的 js 文件会很大，影响页面加载速度

• 动态导入是将组件的 js 代码放入独立的文件，用到时才加载

三.路由重定向

const routes = [
   {
    path:'/404',
    component: () => import('@/views/example/NotFoundView.vue')
  },
  {
    path:'*',
    redirect: '/404'
  }
 
]

①redirect 可以用来重定向（跳转）到一个新的地址

②path 的取值为 * 表示匹配不到其它 path 时，就会匹配它

四.嵌套路由

比如当我们进入主页之后有分类，然后当选择其中一个分类之后进入对应的详情，这个时候组件内再要切换内容，就需要用到嵌套路由（子路由） ；官方文档中给我们提供了一个children属性，这个属性是一个数组类型，里面实际放着一组路由；这个时候父子关系结构就出来了，所以children属性里面的是路由相对来说是children属性外部路由的子路由；

const routes = [
  {
    path:'/',
    component: () => import('@/views/example/ContainerView.vue'),
    redirect: '/c/p1',
    children: [
      { 
        path:'c/p1',
        component: () => import('@/views/example/container/P1View.vue')
      },
      { 
        path:'c/p2',
        component: () => import('@/views/example/container/P2View.vue')
      },
      { 
        path:'c/p3',
        component: () => import('@/views/example/container/P3View.vue')
      }
    ]
  },
  {
    path:'/login',
    component: () => import('@/views/example/LoginView.vue')
  },
  {
    path:'/404',
    component: () => import('@/views/example/NotFoundView.vue')
  },
  {
    path:'*',
    redirect: '/404'
  }
]

子路由变化，切换的是 ContainerView 组件 中 部分的内容

五.路由跳转

1.1标签式

container组件内: