vue2.0+vue3.0一学就会全套教程【router路由】

本文链接：https://blog.youkuaiyun.com/weixin_41765786/article/details/145491437

1. 路由的理解

我们在浏览一个系统时候，左侧或者上边有一菜单，点击不同的菜单可以看到不同的内容。当用户使用http://www.xx.com/class 网址访问页面时，Web服务器会收到接收请求，然后解析URL中的路径/class。在web服务器进程中，该路径对应着相应的处理逻辑，程序会把请求交给路径对应的处理逻辑，这样就完成了一次“路由分发”。

在这里插入图片描述

2.Vue Router

Vue.js提供了一套专用的路由工具库Vue Router,也叫路由管理器，并且与Vue.js的核心深度集成，让构建单页面应用程序变的非常简单。路由可以理解为指向，就是在页面上单击一个按钮跳转到对应的页面，这就是路由跳转。这里需要理解以下三个词语的区别。

route:是个单数，译为路由。即可以简单理解为单个路由或某一条路由。
routes:是个复数，表示多个路由的集合。
router:译为路由器。一个包含route和routes的容器。

安装路由

安装路由有两个方法：一种是在创建项目时，选中安装路由，生成项目的配置选择时，选择安装Vue router。
在这里插入图片描述
另一种是在创建项目时没有安装Router,使用以下命令进行安装。

npm i vue-router@next

路由配置

路由配置代码如下：

//文件 router/index.ts
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView,
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('../views/AboutView.vue'),
    },
  ],
})
export default router

main.ts代码如下：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router)
app.mount('#app')

添加路由链接

是Vue中提供的标签，默认会被渲染为标签，to属性可以用来指定目标地址，to属性会被渲染为标签的href属性。例如：

//to的字符串写法
<router-link to="/home">Home</router-link>

//to的对象写法
<router-link :to="{path:'/home'}">Home</router-link>

其渲染结果为：

<a href="/home">Home</a>

<router-view>是路由展示区的标签，是用来将通过路由规则匹配到的组件渲染到<router-view>的位置。例如：

<template>
	<div class="app">
		<h2 class="title">Vue路由测试</h2>
		<!--导航区 -->
		<div class="navigate">
			<RouterLink to="/home"active-class="active">首页</RouterLink>
			<RouterLink to="/news" active-class="active">新闻</RouterLink>
			<RouterLink to="/about" active-class="active">关于</RouterLink></div>
		<!-- 展示区 -->
		<div class="main-content'>
			<RouterView></Routerview>
		</div>
	</div>
</template>
<script lang='ts" setup >
	import fRouterLink,Routerview} from 'vue-router
</script>

注意：

路由组件通常存放在pages或view文件夹，一般组件通常存放在components文件夹。
通过点击导航，视觉效果上“消失”了的路由组件，默认是被卸载掉的，需要的时候再去挂载。

路由的工作模式

在上面的配置路由中，我们需要建立一个路由器来配置和绑定相关信息。在router文件夹下的index.ts中使用createRouter方法创建一个路由器router,router中指定了两个内容，一个是路由的工作模式，一个是路由数组。路由的工作模式有两种。一种是history模式，另外一种是hash模式。

history模式

优点：URL更加美观，不带有#，更接近传统的网站URL。
缺点：后期项目上线，需要服务器配合处理路径问题，否则刷新会有404错误。

hash模式

优点：兼容性更好，因为不需要服务器端处理路径
缺点: URL带有#不太美观，而且在SEO优化方面相对较差。

3.命名路由

在src/router目录下编写index.ts文件，用来创建路由。其文件内容如下：

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import About from '../views/About.vue'
const routes = [
	{
		path: '/',        //根目录
		redirect: '/home'  //路由重定向到 '/home'
	},
	{
      path: '/home',
      name: 'home',
      component: HomeView,
    },
    {
      path: '/about',
      name: 'About',
      component: About,
    }
]
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: routes
})
export default router

4. 嵌套路由

在实际的项目应用中，嵌套路由通常有多层嵌套的组件组合而成，例如，在home页面中，希望通过路径/home/message和/home/news访问一些内容，这就需要用到嵌套路由。通过路径/home访问一个组件，路径/home/message和/home/news通过路由占位符将渲染这两个路径对应的组件。

实现嵌套路由需要两个步骤：

创建对应的子组件，并且在路由映射中配置对应的子路由。
在父组件内部使用<router-view>标签。

配置嵌套路由规则，使用children配置项，例如：

const router =createRouter(history:createwebHistory()
	routes:[
		{	
			name:'zhuye'
			path:'/home'
			component :Home,
			children:[
				{
					name:'message'
					path:'msg'
					component :Message
				},
				{
					name:'news'
					path:'news'
					component :News
				}
			]
		}
	]

export default router

在主页组件Home.vue中，增加路由链接和路由占位符<router-view>,如下：

<template>
	<div class="home">
		<h1>网站主页</h1>
		<router-link to="/home/news">新闻</router-link> &nbsp;&nbsp;
		<router-link to="/home/msg">消息</router-link> 
		<router-view />
	</div>
</tamplate>

5. 路由传参

route路由对象通过useRoute()方法来创建，并且在使用useRoute方法之前必须先从vue-router中引入，其使用的语句如下：

import {useRoute} from 'vue-router'
const route = useRoute()

通过route路由对象可以获取URL中所传递的路由。通常有两种主要的方式：

使用<route-link>标签传递参数。
使用事件方法来传递参数。

使用<route-link>标签传递参数有两种形式，一种是传递query参数，一种是传递params参数。

query参数

传递参数

<!-- 跳转并携带query参数(to的字符串写法)-->
<router-link to="/news/detai1?a=1&b=2&content=欢迎你">
	跳转
</router-link>
<!-- 跳转并携带query参数(to的对象写法)-->
<RouterLink
	:to="{
	//name:'xiang'，//用name也可以跳转
	path:"/news/detai1',
	query:{
		id:news .id,
		title:news.title,
		content:news.content
		}
	}"
>
{{news.title}}
</RouterLink>

接收参数

import fuseRoute}from 'vue-router' 
const route = useRoute(// 打印query参数
console.log(route.query)

params参数

传递参数

<!-- 跳转并携带params参数（to的字符串写法） -->
<RouterLink :to="`/news/detail/001/新闻001/内容001`">{{news.title}}</RouterLink>
				
<!-- 跳转并携带params参数（to的对象写法） -->
<RouterLink 
  :to="{
    name:'xiang', //用name跳转
    params:{
      id:news.id,
      title:news.title,
      content:news.title
    }
  }"
>
  {{news.title}}
</RouterLink>

接收参数

import {useRoute} from 'vue-router'
const route = useRoute()
// 打印params参数
console.log(route.params)

注意：
1：传递params参数时，若使用to的对象写法，必须使用name配置项，不能用path。
2：传递params参数时，需要提前在规则中占位。

6. 编程式导航

Vue页面中导航有两种主要方式，一种是通过页面标签点击，例如Vue中的<router-link></router-link>,这种一般叫做声明式导航，另一种是通过javascript形式的API实现导航的方式，叫做编程式导航。

router是通过Vue3.0 的useRouter方法创建的，使用该方法之前必须从Vue中引入useRouter。其使用的语句如下：

import { useRouter } from 'vue-router' //引入useRouter
const rouer = useRouter()   //创建router

(1) rouer.push() 方法

如果要导航到不同的URL,则使用router.push()方法。这个方法会向history栈添加一个新的记录，这样当用户单击浏览器的“后退”按钮时，则退回到上一次访问的浏览器网页。另外，单击<router-link :to="...">等同于调用router.push()方法，该方法的参数可以是一个字符串路径，或者一个描述地址的对象。例如：

//字符串
router.push('home')
//对象
router.push({path:'home'})
//命令的路由
router.push({name:'user',params:{ userId:'123'}})
//带查询参数，变成 /register?plan=private
router.push({path:'register',query:{plan:'private'}})

需要强调的是，如果提供了path参数，则params参数将会被忽略，上述例子中的query并没有这个限制。

const userId = 123
router.push({path:`/user/${userId}`}) //导航到：/user/123
//下面的params不生效
router.push({path:'/user',params:{userId}})

(2) router.replace()方法
该方法和router.push()方法相同，唯一的区别就是不向浏览器的history添加新记录，而是替代当前的history记录。

(3）router.go()方法
router.go()方法的参数是一个整数，意思是在浏览器的history记录中向前或后退多少步，类似于原生javascript脚本中的window.history.go(n)方法。

//在浏览器中前进一步，等同于 history.forward()
router.go(1)

//在浏览器后退一步，等同于history.back()
router.go(-1)