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

一、 路由的概念

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
		}
	]
})

4. 实现切换（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>

5. 指定展示位置

<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,
				}
			],
		},

	]
})

2. 跳转（要写完整路径）

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