10.vue-router详解一.安装使用router 1.安装包 yarn add/npm i vue-router

一.安装使用router

1.安装包

yarn add/npm i vue-router

2.创建touter实例,挂载到vue上

-vue2:

import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const routes = [
  {
    path: '/',
    name: 'home',
    component: ()=>"@/views/home"
  }
];
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
});
export default router;

main.js

new Vue({
  router,
  store,
  render: (h) => h(App)
}).$mount('#app');

-vue3:

import { createRouter, createWebHistory } from 'vue-router';
const routes = [
  {
    path: '/',
    name: 'home',
    component: ()=>"@/views/home"
  }
];
const router = createRouter({
  history: createWebHistory(),
  routes
});
export default router;

main.js

createApp(App).use(router).mount('#app');

路由出口

  app:
  <router-link to="/home">跳转home</router-link>
  <hr />
  <router-view />

二.路由懒加载

在路由表里面,组件不要一开始就引用进来然后注册路由,比如下面写法

import Home from '@/views/home.vue';
const routes = [
  {
    name: '',
    path: '/',
    component: Home
  }
]

这样组件在一开始就加载,比较浪费性能,可以在"component"这里动态导入,只有在路由加载的时候才加载组件

const routes = [
  {
    name: '',
    path: '/',
    component: () => import('@/views/home.vue')
  }
]

这里用的是import 同理也可以使用require

三.hash和history模式

1.怎么设置

vue2 VueRouter中的mode可以选择history或者hash

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
});

vue3中在vue-router中导入的时候可以选择createWebHistory,createWebHashHistory

import { createRouter, createWebHistory ,createWebHashHistory} from 'vue-router';

const router = createRouter({
  history: createWebHistory(),
  routes
});

2hash模式

1.hash 就是指 url 尾巴后的 # 号以及后面的字符,和css的锚点一样,在指定区域内显示指定的内容.#号会影响美观

2.hash兼容性高一点,可以兼容到ie8.

3.hash改变是监听hashchange事件,不会发起请求

3history模式

1.history是html5新增pushState()和replaceState（）方法

2.兼容性较差,需要特点游览器支持

3.容易返回404所有需要后端配合,

四路由传参

我们在路由跳转的时候经常需要传递参数,比如id,type等等信息. 在vue中我们传递参数分别有2中形式,params和query

query 有?=拼接在请求后面

1.通过router-link 相当于a标签

  <router-link :to="{ name: 'a', query: { id: 123 } }">去a路由</router-link>

2.通过router.push

<template>
  这是a
  <br />
  <button @click="toB">去B路由</button>
</template>
<script setup>
import { useRouter } from 'vue-router';
const router = useRouter();
const toB = () => {
  router.push({
    name: 'b',
    query: {
      id: 333
    }
  });
};
</script>

3.获取参数 vue3用router.currentRoute.value.query.xx获取参数 vue2用this.$router.query.xx获取

其中query传参的2中方法中.可以选择name属性或者path属性完成跳转,参数是拼接的,刷新页面不会失效.

params 可已选择/拼接在后面.也可以选择隐藏

1.直接/拼接在后面,需要在路由路径中提前设置参数如:id

  {
    name: 'a',
    path: '/a/:id',
    component: () => import('@/views/a.vue')
  },

可以使用router-link跳转,或者router.push 如果使用path,则需要将拼接的参数写在后面,如果使用name,就要用params传递参数

  router.push({name: 'a', params: {id: 333}});
  <router-link :to="{ path: '/a/123' }">去a路由</router-link>

2.不显示参数,在url地址栏不显示参数,这里就不能用path了,必须要有name

 <router-link :to="{ name: 'a', params: { id: 123 } }">去a路由</router-link>
 router.push({name: 'a', params: {id: 333}});

混合传参

router.push({ name: 'b', params: { id: 333 }, query: { zx: 222 } }); params和query都有

props接收参数

路由设置props为true 就能在组件里直接用props接收params显示参数

  {
    name: 'a',
    path: '/a/:id',
    component: () => import('@/views/a.vue'),
    props: true
  }
  
<script setup>
const props = defineProps({
  id: Number
});
</script>

还可以在props写对象,在组件中接收

  {
    name: 'a',
    path: '/a/:id',
    component: () => import('@/views/a.vue'),
    props: { c: 1, d: 2 }
  }
  const props = defineProps({
  c: Number,
  d: Number
});

五路由守卫

一共7个守卫全局路由守卫: beforeEach 前置守卫 affterEach 后置守卫 beforeResolve 解析守卫组件路由的守卫 beforeRouterEnter 进入组件之前触发,在Created前面 beforeRouterUpdated 路由更新但是内容不会改变 beforeRouterLeave 离开之前触发,在beforeDestory之前触发路由独享守卫 beforeEnter 读取路由的信息一般有3个参数 to:去哪里 from:来自哪里,next:是否放行

beforeEach

路由前置守卫,这个是用的比较多的,在路由进入的时候进行判断.通常我们在判断路由权限页面的时候会用到.下面或者之后讲权限管理会详细讲解.

affterEach

路由后置守卫和beforeEach()相比，这个router方法是在路由进入之后触发，并且少了一个参数next()，不需要调用next进入.代表已经成功进入到路由页面了,可以进行一些统一的操作,比如页面滚动,统一修改某个页面的参数.

beforeResolve

路由解析守卫,介于上面2着中间,进入前可以用beforeEach,进入后可以用affterEach.目前还没用过,

beforeEnter

类似于beforeEach 不过是某个具体路由的守卫,比如某个单独的路由设置拦截操作.

beforeRouteEnter

进入组件前的守卫,如果想要获取组件实例可以在next里面写一个回调,回调的参数就是组件实例.在里面可以执行一些操作

  beforeRouteEnter(to, from, next) {
    next((e) => {
      window.console.log(e);
    });
  }

beforeRouterUpdated

路由更新但是内容不会改变路由路径不变，调用的是同个界面，即组件被连续复用的时候，会调用到beforeRouteUpdate触发注意:一个父路由下的子路由跳转会触发这个钩子函数。

beforeRouterLeave

路由离开时的守卫,和enter差不多.可以搭配enter和keep-alive实现组件缓存,页面滚动这种.

六其他信息

currentRoute:当前的路由信息 meta:标签 path:路由访问路径 name:路由名字 redirecte:重定向 query:query参数 params:params参数, addRoute:添加路由, back:回退一步 push:挑转 removeRoute:删掉路由 hasRoute:路由表 options:路由信息

下次想到其他的了再更新

10.vue-router详解