15 【Vue-Router】

最新推荐文章于 2023-03-30 00:08:29 发布

DSelegent

最新推荐文章于 2023-03-30 00:08:29 发布

阅读量444

点赞数

分类专栏： vue2学习笔记文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/DSelegent/article/details/126053638

版权

本文详细介绍了Vue-Router的使用，从基本概念到高级特性，包括路由理解、基本路由配置、多级路由、重定向、命名路由、路由参数、路由守卫、路由懒加载等，旨在帮助开发者深入理解并掌握前端路由的运用。

摘要由CSDN通过智能技术生成

29.vue-router

29.1相关理解

29.1.1 vue-router 的理解

vue的一个插件库，专门用来实现SPA应用

29.1.2对SPA应用的理解

1.单页Web应用（single page web application，SPA）
2.整个应用只有一个完整的页面
3.点击页面中的导航链接不会刷新页面，只会做页面的局部更新
4.数据需要通过ajax请求获取

29.1.3路由的理解

1.什么是路由?
一个路由就是一组映射关系（key - value）
key为路径，value可能是function或component

2.路由分类
后端路由
理解：value是function，用于处理客户端提交的请求
工作过程：服务器接收到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据
前端路由
理解：value是component，用于展示页面内容
工作过程：当浏览器的路径改变时，对应的组件就会显示
① 用户点击了页面上的路由链接（本质是a链接）

② 导致了 URL 地址栏中的 Hash 值发生了变化

③ 前端路由监听了到 Hash 地址的变化

④ 前端路由把当前 Hash 地址对应的组件渲染都浏览器中

结论：前端路由，指的是 Hash 地址与组件之间的对应关系！

29.2基本路由

29.2.1基本使用

安装vue-router，命令：npm i vue-router@3
应用插件：Vue.use(VueRouter)

编写router配置项:

//引入VueRouter
import VueRouter from 'vue-router'
//引入Luyou 组件
import About from '../components/About'
import Home from '../components/Home'

//创建router实例对象，去管理一组一组的路由规则
const router = new VueRouter({
     
	routes:[
		{
     
			path:'/about',
			component:About
		},
		{
     
			path:'/home',
			component:Home
		}
	]
})

//暴露router
export default router

实现切换
<router-link></router-link>浏览器会被替换为a标签
active-class设置链接激活时使用的 CSS 类名
```
<router-link active-class="active" to="/about">About</router-link>
```
指定展示位置
```
<router-view></router-view>
```

切换的时候会把路由销毁，触发销毁生命周期函数

29.2.2实际使用

src/router/index.js该文件专门用于创建整个应用的路由器

import VueRouter from 'vue-router'
// 引入组件
import About from '../components/About'
import Home from '../components/Home'

// 创建并暴露一个路由器
export default new VueRouter({
   
	routes:[
		{
   
			path:'/about',
			component:About
		},
		{
   
			path:'/home',
			component:Home
		}
	]
})

src/main.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'	// 引入VueRouter
import router from './router'				// 引入路由器

Vue.config.productionTip = false

Vue.use(VueRouter)	// 应用插件

new Vue({
   
	el:'#app',
	render: h => h(App),
	router:router
})

src/App.vue

<template>
  <div>
	<!-- 原始html中我们使用a标签实现页面的跳转 -->
     <!-- <a class="list-group-item active" href="./about.html">About</a> -->
     <!-- <a class="list-group-item" href="./home.html">Home</a> -->

	 <!-- Vue中借助router-link标签实现路由的切换 -->
	 <router-link class="list-group-item" 
      active-class="active" to="/about">About</router-link>
      <router-link class="list-group-item" 
      active-class="active" to="/home">Home</router-link>

	   <!-- 指定组件的呈现位置 -->
       <router-view></router-view>
  </div>
</template>

<script>
	export default {
		name:'App'
	}
</script>

src/components/Home.vue

<template>
	<h2>我是Home的内容</h2>
</template>

<script>
	export default {
		name:'Home'
	}
</script>

src/components/About.vue

<template>
	<h2>我是About的内容</h2>
</template>

<script>
	export default {
		name:'About'
	}
</script>

29.3 几个注意点

路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹。
通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。
每个组件都有自己的$route(路由)属性，里面存储着自己的路由信息。
整个应用只有一个router，可以通过组件的$router(路由器)属性获取到。

29.4多级路由

配置路由规则，使用children配置项：

routes:[
	{
     
		path:'/about',
		component:About,
	},
	{
     
		path:'/home',
		component:Home,
		children:[ //通过children配置子级路由
			{
     
				path:'news', //此处一定不要写：/news
				component:News
			},
			{
     
				path:'message',//此处一定不要写：/message
				component:Message
			}
		]
	}
]

跳转（要写完整路径）：

<router-link to="/home/news">News</router-link>

指定展示位置

<router-view></router-view>

src/pages/Home.vue

<template>
	<div>
		<h2>Home组件内容</h2>
		<div>
			<ul class="nav nav-tabs">
				<li><router-link class="list-group-item" 
                       active-class="active" to="/home/news">News</router-link></li>
				<li><router-link class="list-group-item" 
                       active-class="active" to="/home/message">Message</router-link></li>
			</ul>
			<router-view></router-view>
		</div>
	</div>
</template>

<script>
	export default {
		name:'Home',
	}
</script>

src/pages/Message.vue

<template>
    <ul>
        <li>
            <a href="/message1">message001</a>&nbsp;&nbsp;
        </li>
        <li>
            <a href="/message2">message002</a>&nbsp;&nbsp;
        </li>
        <li>
            <a href="/message/3">message003</a>&nbsp;&nbsp;
        </li>
    </ul>
</template>

<script>
    export default {
        name:'News'
    }
</script>

src/router/index.js

//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入组件
import Home from '../pages/Home'
import About from '../pages/About'
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',