1. 路由的基本概念与原理
1.1 路由
路由是一个比较广义和抽象的概念，路由的本质就是对应关系。
在开发中，路由分为
- 后端路由
概念：根据不同的用户URL请求，返回不同的内容
本质：URL请求地址与服务器之间的对应关系
后端渲染，会频繁的提交表单导致浏览器刷新，存在性能问题。
Ajax前端渲染(解决了提交表单浏览器刷新的问题，但是不支持浏览器的前进后退操作)
SPA单页面应用程序（整个网站只有一个页面，内容的变化通过Ajax局部更新实现、同时支持浏览器地址栏的前进和后退操作）
SPA实现原理之一：基于URL地址的hash（hash的变化会导致浏览器记录的变化、但是hash的变化不会触发新的URL请求）
在实现SPA过程中，最核心的技术就是前端路由
- 前端路由
概念：根据不同的用户事件，显示不同的页面内容
本质：用户事件与事件处理函数之间的对应关系
- 前端路由负责事件监听，触发事件后，通过事件函数渲染不同内容。
- 实现简易的前端路由
我们的要求是点击菜单的时候改变URL的hash，根据hash的变化控制组件的切换。
基本原理：
结合动态组件
// 监听window的onhashchange事件，根据获取到的最新的hash值，切换要显示的组件的名称 winow.onhashchange=function(){ // 通过location.hash获取到最新的hash值 } 复制代码
1.2 Vue Router
Vue Router是vue.js官方的路由管理器。（更符合企业级开发的需要）
它和Vue.js的核心深度集成，可以非常方便的用于SPA应用程序的开发
Vue Router包含的功能有：
- 支持HTML5history模式或hash模式
- 支持嵌套路由
- 支持路由参数
- 支持编程式路由
- 支持命名路由
Vue Router的进阶功能
- 导航守卫
- 路由懒加载
2.Vue Router的基本使用
2.1 基本使用步骤
- 安装
- 添加路由链接
- 添加路由填充位
- 定义路由组件
- 配置路由规则并创建路由实例
- 把路由挂载到Vue根实例中
1.安装
npm install vue-router 复制代码
我们在package.json文件中查看是否安装成功
因为我们是在一个模块化工程中使用它，必须通过
Vue.use明确地安装路由功能：
import VueRouter from 'vue-router' Vue.use(VueRouter) 复制代码
写在入口文件main.js中
2. 添加路由链接
// router-link 是vue中提供的标签，默认会被渲染为a标签，to属性默认会被渲染为href属性，to属性的默认值会被渲染为#开头的hash地址 <router-link to="/user">这里是User界面</router-link> <router-link to="/register">这里是Register界面</router-link> 复制代码
3. 添加路由填充位
也叫做路由占位符
将来通过路由规则匹配到的组件，将会被渲染到router-view所在的位置
<router-view></router-view> 复制代码
4. 定义路由组件
<template> <div> 这里是User界面 </div> </template> <script> export default { } </script> 复制代码
<template> <div> 这里是Register界面 </div> </template> <script> export default { } </script> 复制代码
5. 配置路由规则并创建路由实例
// 创建路由实例对象 const router = new VueRouter({ // routes是路由实例规则 routes: [ // 每条路由规则都是一个配置对象，其中至少包含path和component两个属性 // path表示当前路由规则匹配的hash地址 // component表示当前路由规则对应要展示的组件 {path:'/user',component:User}, {path:'/register',component:Register}, ] }) 复制代码
6. 把路由挂载到Vue根实例中
new Vue({ render: (h) => h(App), store, router, }).$mount("#app") 复制代码
2.2 路由重定向
路由重定向指的是：用户在访问地址A的时候，强制用户跳转到地址C，从而展示特定的组件页面
通过路由规则的redirect属性，指定一个新的路由地址，可以方便地设置路由的重定向：
const routes = [ // 通过redirect属性指定一个新的路由地址 { path: '/', redirect: '/user' }, { path: '/user', component: User }, { path: '/register', component: Register } ] 复制代码
3. Vue Router嵌套路由
3.1 嵌套路由用法
1. 嵌套路由功能分析
- 点击父级路由链接显示模板内容
- 模板内容又有子级路由链接
- 点击子级路由链接显示子级模板内容
2. 父级路由组件模板
- 父级路由链接
- 父组件路由填充位
<p> <router-link to="User">User</router-link> <router-link to="Register">Register</router-link> </p> <div> <!--控制组件的显示位置--> <router-view></router-view> </div> 复制代码
3. 子级路由模板
- 子级路由链接
- 子级路由填充位
const Register={ template:`<div> <h1>Register组件</h1> <hr/> <router-link to="/register/tab1">Tab1</router-link> <router-link to="/register/tab2">Tab2</router-link> <!--子路由填充位置--> <router-view></router-view> </div>` } 复制代码
4. 嵌套路由配置
const routes =[ {path:'/user',component:User}, { path:'/register', component:Register, children:[ {path:'/register/tab1',component:Tab1}, {path:'/register/tab2',component:Tab2} ] }, ] 复制代码
4. Vue Router动态路由匹配
4.1 动态匹配路由的基本用法
应用场景：通过动态路由参数的模式进行路由匹配
动态路径参数，以冒号开头
const routes = [ { path: '/user/:id', component: User }, { path: '/register', component: Register } ] 复制代码
路由组件中通过$route.params获取路由参数
const User = { template: '<div> User组件--组件id为{{$route.params.id}} </div>' } 复制代码
5.路由组件传递参数
$route与对应路由形成高度耦合，不够灵活，所以可以使用pros将组件和路由解耦
1.props的值为布尔类型
const routes = [ { path: '/user/:id', component: User, props: true }, { path: '/register', component: Register } ] 复制代码
const User = { props: ['id'], template: '<div> User组件--组件id为{{id}} </div>' } 复制代码
2.props的值类型为对象类型(接受静态参数)
const routes = [ { path: '/user/:id', component: User, props: { username: '橙子', age: 18 } }, { path: '/register', component: Register } ] 复制代码
const User = { props: ['username', 'age'], template: '<div> User组件--组件id为{{id}} 姓名为：{{username}}，年龄为{{age}}</div>' } 复制代码
3.props的值类型为函数类型(接受静态和动态参数)
const routes = [ { path: '/user/:id', component: User, props: route => ({ username: '橙子', age: 18, id: route.params.id }) }, { path: '/register', component: Register } ] 复制代码
const User = { props: ['username', 'age', 'id'], template: '<div> User组件--组件id为{{id}} 姓名为：{{username}}，年龄为{{age}}</div>' } 复制代码
6. Vue Router命名路由
6.1 命名路由的配置规则
为了更加方便的表示路由的路径，可以给路由规则起一个别名，即为”命名路由”。
const routes = [ { name: 'user', path: '/user/:id', component: User, props: route => ({ username: '橙子', age: 18, id: route.params.id })}, { path: '/register', component: Register } ] 复制代码
<router-link to='/user/1'>User1</router-link> <router-link to='/user/2'>User2</router-link> <router-link :to='{name:"user",params:{id:3}}'>User3</router-link> <router-link to='/register'>Register</router-link> 复制代码
7. Vue Router 编程式导航
7.1 页面导航的两种方式
声明式导航：通过点击链接实现导航的方式，叫做声明式导航。例如：普通页面中的<a></a>链接或vue中的<router-link></router-link>
编程式导航：通过调用JavaScript形式的API实现导航的方式，叫做编程式导航。
7.2 编程式导航基本用法
常用的编程式导航API如下：
- this.$router.push('hash地址')
- this.$router.go(n)
const User = { props: ['username', 'age', 'id'], template: ` <div> <h1>User组件--组件id为{{id}} 姓名为：{{username}}，年龄为{{age}}</h1> <p><button @click="goRegister">去往注册页面</button></p> </div> `, methods: { goRegister() { this.$router.push('/register') } } } 复制代码
最后
如果这篇文章对你有帮助的话，麻烦点赞收藏哟~
