往期精彩文章

简介

vueRouter是vue开发中非常常见的一种需求！本文将带领大家在5分钟内快速回顾学习vueRouter，文章简介无废话，大家放心食用！

核心用法

路由配置与引入

安装

js 复制代码

npm install vue-router@next

创建路由配置，在项目中创建一个路由配置文件，通常命名为router.js或者router/index.js：

js 复制代码

import { createRouter, createWebHashHistory } from 'vue-router'
//createRouter用于创建路由的实例对象
//createWebHistory 用于指定路由的工作模式（hash模式）
import Home from '../components/Home'
 // 定义 hash 与组件之间的对应关系
const routes  = [
  {
    path: '/home',
    // 给路由命名方便访问
    name: 'myHome',
    component: Home
  },
    //404页面
    //ue3重定向写法："/:catchAll(.*)",  "/:pathMatch(.*)",   path: "/:pathMatch(.*)*",三种写法
    path: '/:catchAll(.*)',
    name: '/404',
    component: () => import('../views/404.vue')
]

// 创建路由实例对象
const router = createRouter({
   // 指定路由工作模式
  history: createWebHashHistory(),
  routes
})
export default router

创建Vue实例，在Vue应用中，将路由配置引入并挂载到Vue实例中

js 复制代码

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(router)
app.mount('#app')

使用

使用router-link

js 复制代码

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/home">前往首页</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>

编程式导航

js 复制代码

<template>
  <div>
    <button @click="navigateToHome">前往首页</button>
    <button @click="navigateToAbout">Go to About</button>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';

const router = useRouter();

const navigateToHome = () => {
  // 字符串路径写法
  router.push("/home");

  // 路由对象写法
  // router.push({ name: 'myHome' });
};

</script>

嵌套（多级）路由

js 复制代码

// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '../pages/About'
import Home from '../pages/Home'
import News from '../pages/News'
import Message from '../pages/Message'

//创建并暴露一个路由器
export default new VueRouter({
    routes:[
        {
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home,
            children:[
                {
                    path:'news',  //注意：news前不需要写"/"
                    component:News,
                },
                {
                    path:'message',
                    component:Message,
                }
            ]
        }
    ]
})

router-link组件的跳转方式

js 复制代码

<router-link to="/home/message">Message</router-link>

注：访问的时候必须保持路径完成

编程时导航的写法

js 复制代码

const jump = () => {
  // 字符串路径写法
  router.push("/home/message");;
};

路由传参（跳转）

query查询参数

查询参数是作为URL的查询字符串出现的，路由链接如：http:xxxxx/a?id=1&key=2。

路由配置

js 复制代码

const routes  = [
  {path: '/a',name: 'A', component: A},
]

跳转方式

跳转路由并携带query参数，to的字符串写法

js 复制代码

<router-link :to="/a/?id=1">前往A组件</router-link>

跳转路由并携带query参数，to的对象写法

js 复制代码

<router-link :to="{path:'/b',query:{id:2}}">前往B组件</router-link>

使用编程式导航写法

js 复制代码

<script setup>
import { useRouter } from 'vue-router';
const router = useRouter();
const toA = ()=> router.push({
  path:"/a",
  query:{id:1}
})
</script>

上述三种方式跳转后，路由连接都是http:xxxxx/a?id=1

如何获取query参数

在http:xxxxx/a?id=1的路由连接中，使用router可以获取到query参数

js 复制代码

<script setup>
import { useRouter } from 'vue-router';
const router = useRouter();
console.log(router.query.id) // 1
</script>

params动态路由

什么是动态路由

js 复制代码

const routes = [
  { 
    path: '/blog/:postId',  // :postId 是动态路由参数
    name: 'blog',
    component: BlogPost
  }
];

上述代码中，我们定义了一个路由路径/blog/:postId，其中:postId是一个动态路由参数，它表示博客文章的唯一标识。这样，当我们访问/blog/123时，123就是传递给postId参数的值，这就是动态路由。

跳转方式

跳转携带parmas参数，to的字符串写法

js 复制代码

<router-link :to="/blog/123">跳转</router-link>

跳转携带parmas参数，to的对象写法

js 复制代码

<router-link :to="{name:'blog',params:{postId:123}"跳转</router-link>

特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置

编程式导航的写法

js 复制代码

<script setup>
import { useRouter } from 'vue-router';
const router = useRouter();
router.push({ name: 'blog', params: { postId:123 } });
</script>

上述三种方式，跳转的最终路径都是http:xxxx/blog/123

如何获取parmas参数

在http:xxxx//blog/123的路由连接中 ，我们可以在vue组件中使用router.params获取到动态参数：

js 复制代码

<template>
  <div>
    <--router.params.postId结果就是123-->
    <p>{{ router.params.postId }}</p>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
const router = useRouter();
console.log(router.params.postId) // 123
</script>

路由记录

的replace属性

作用：控制路由跳转时操作浏览器历史记录的模式
浏览器的历史记录写入方式有两种，分别为push和replace，push是追加历史记录，replace是替换当前记录。默认值为push.

push：浏览器记录可以前进后退。

repalce:浏览器上一次的历史记录被覆盖

如何开启repalce模式：

ini 复制代码

<router-link  :replace = "true"   :to=".....">
//或
<router-link  replace   :to=".....">

路由组件缓存

1.作用：让不展示的路由组件保持挂载，不被销毁

2.具体编码

js 复制代码

<keep-alive>
	<router-view></router-view>
</keep-alive>

js 复制代码

<keep-alive include="News">
	<router-view></router-view>
</keep-alive>

js 复制代码

<keep-alive :include="['News','title']">
	<router-view></router-view>
</keep-alive>

全局路由守卫

路由跳转时，如果用户没有权限（localstorage中没有获取到token）时，路由跳转时应该返回登录页。这一功能可以借助路由守卫来实现。

路由守卫包括 前置路由 和 后置路由

前置路由是初始化、页面切换时被调用，用于拦截页面的跳转操作。

路由后置守卫是离开页面时的一个操作。

基本语法：

js 复制代码

//创建并暴露一个路由器
const router =  new VueRouter({
	routes:[
    {
      name:'xiaoxi',
      path:'message',
      component:Message,
      meta:{isAuth:true,title:'消息'},
    }
	]
})

//全局前置路由守卫------------初始化的时候被调用、每次路由切换之前被调用
router.beforeEach((to,from,next)=>{
	console.log('前置路由守卫',to,from)
	if(to.meta.isAuth){ //判断是否需要鉴权
		if(localStorage.getItem('school')==='atguigu'){
			next()
		}else{
			alert('学校名不对，无权限查看！')
		}
	}else{
		next()
	}
})

//全局后置路由守卫------------初始化的时候被调用、每次路由切换之后被调用
router.afterEach((to,from)=>{
	console.log('后置路由守卫',to,from)
	document.title = to.meta.title || '硅谷系统'//修改网页标题
})

export default router

前置路由接受三个参数，后置路由只是接受to、form参数

to、form和next中间件

to和form都是一个对象，里面包括了路由名name属性、路由前往或离开的路径path、query及parmas参数已经路由元信息meta（用户在routes中自定义的数据）

next是一个函数，next()表示放行拦截。

5min带你快速回顾、学习VueRouter的使用！

往期精彩文章

简介

核心用法

路由配置与引入

使用

嵌套（多级）路由

路由传参（跳转）

query查询参数

跳转方式

如何获取query参数

params动态路由

什么是动态路由

跳转方式

如何获取parmas参数

路由记录

路由组件缓存

全局路由守卫