Vue学习笔记10--路由1(概念、基本使用、多级路由)

发布时间:2024年01月23日

一、 路由的概念

  1. 路由就是一组key-value的对应关系
  2. key为路径,value可能是function或component
  3. 多个路由,需要经过路由器的管理
  4. 路由分类
  • 后端路由
    • 理解:value是function,用于处理客户端提交的请求
    • 工作过程:服务器接收到一个请求时,根据请求路径找到匹配的函数来处理请求,返回响应数据
  • 前端路由
    • 理解:value是component,用于展示页面内容
    • 工作过程:当浏览器的路径改变时,对应的组件就会显示
  • vue-router是vue的一个插件库,专门用来实现SPA应用
  • SPA(single page web application)单页web应用
    • 整个应用只有一个完整的页面
    • 点击页面中的导航链接不会刷新页面,只会做页面的局部更新
    • 数据需要通过ajax请求获取

二、 路由的使用

  1. 安装vue-router npm install vue-router
  2. 应用插件:Vue.use(VueRouter)
  3. 编写router配置项
// 该文件专门用于创建整个应用的路由器
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
		}
	]
})

  1. 实现切换(active-class可配置高亮样式)
<!-- 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>
  1. 指定展示位置
<router-view></router-view>
  • 几个注意点
    • 路由组件通常存放在pages文件夹,一般组件通常存放在components文件夹。
    • 通过切换,“隐藏”了的路由组件,默认是被销毁掉的,需要的时候再去挂载。
    • 每个组件都有自己的$route属性,里面存储着自己的路由信息。
    • 整个应用只有一个router,可以通过组件的$router属性获取到。

多级路由(嵌套路由)

  1. 配置路由规则,使用children配置项
export default new VueRouter({
	routes: [
		{
			path: '/about',
			component: About
		},
		{
			path: '/home',
			component: Home,
			children: [ //通过children配置子路由
				{
					path: 'news', //此处一定不要写成:/news
					component: News,
				},
				{
					path: 'message', //此处一定不要写成:/message
					component: Message,
				}
			],
		},

	]
})
  1. 跳转(要写完整路径)
<router-link to="/home/news">News</router-link>
文章来源:https://blog.csdn.net/jxncxgx/article/details/135739257
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。