Vue 前端路由
1.路由的基本概念与原理
1.1路由
路由是一个比较广义和抽象的概念,路由的本质就是对应关系。
在开发中,路由分为:
- 后端路由
- 前端路由
1.后端路由
- 概念: 根据不同的用户URL请求,返回不同的内容
- 本质: URL请求地址与服务器资源之间的对应关系
2.前端路由(SPA)
1.SPA
- 后端渲染(存在性能问题)
- Ajax前端渲染(前端渲染提高性能,但是不支持浏览器的前进后退操作)
- SPA (Single Page Application)单页面应用程序: 整个网站只有一个页面,内容的变化通过Ajax局部更新实现、同时支持浏览器地址栏的前进和后退操作
- SPA实现原理之一: 基于URL地址的hash (hash的变化会导致浏览器记录访问历史的变化、但是hash的变化不会触发新的URL请求)
- 在实现SPA过程中,最核心的技术点就是前端路由
2.前端路由
- 概念: 根据不同的用户事件,显示不同的页面内容
- 本质: 用户事件与事件处理函数之间的对应关系
3.实现简易的前端路由
-
基于URL中的hash实现(点击菜单的时候改变URL的hash,根据hash的变化控制组件的切换)
//监听window的onhashchange 事件,根据获取到的最新的hash值,切换要显示的组件的名称
window.onhashchange = function () {
// 通过location.hash获取到最新的hash值
}
1.2Vue Router
vue Router(官网: [https: //router.vuejs.org/zh/](https: //router.vuejs.org/zh/))是Vue.js 官方的路由管理器。它和vue.js 的核心深度集成,可以非常方便的用于SPA应用程序的开发。
vue Router包含的功能有:
- 支持HTML5历史模式或hash模式
- 支持嵌套路由
- 支持路由参数
- 支持编程式路由
- 支持命名路由
2.vue-router的基本使用
2.1基本使用步骤
- 引入相关的库文件
- 添加路由链接
- 添加路由填充位
- 定义路由组件
- 配置路由规则并创建路由实例
- 把路由挂载到 Vue 根实例中
2.2路由重定向
路由重定向指的是: 用户在访问地址 a的时候,强制用户跳转到地址c,从而展示特定的组件页面;
var router = new vueRouter ({
routes: [
//其中,path表示需要被重定向的原地址,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/
</div>`
}
4.嵌套路由用法
- 父级路由通过children属性配置子级路由
const router = new vueRouter({
routes: [
{ path: ' /user', component: User },
{
path: ' /register',
component: Register
//通过children属性,为/register 添加子路由规则
children: [
{ path : ' /register/tab1' , component: Tab1 },
{ path: ' / register/tab2' , component: Tab2 }
]
},
]
})
4.vue-router动态路由匹配
4.1动态匹配路由的基本用法
应用场景:通过动态路由参数的模式进行路由匹配
var router = new vueRouter ({
routes: [
//动态路径参数以冒号开头
{ path : '/user/:id', component : User }
]
})
const User = {
//路由组件中通过$route.params获取路由参数
template: '<div>user {{ $route.params.id }}</div>'
}
4.2路由组件传递参数
$route与对应路由形成高度耦合,不够灵活,所以可以使用props将组件和路由解耦
1.props的值为布尔类型
const router = new VueRouter({
routes: [
//如果props被设置为true,route.params将会被设置为组件属性
{ path: '/user/:id', component: User, props: true }
})
const User = {
props: ['id'], //使用props接收路由参数
template: '<div>用户ID:{{ id }</div>' //使用路由参数
}
5.vue-router编程式导航
5.1页面导航的两种方式
- 声明式导航:通过点击链接实现导航的方式,叫做声明式导航
例如:普通网页中的<a></a>
链接或 vue 中的<router-link></router-link>
- 编程式导航:通过调用JavaScript形式的API实现导航的方式,叫做编程式导航例如:普通网页中的
location.href
常用的编程式导航API如下:
- this.$router.push (‘hash地址’)
- this.$router.go(n)
const User = {
template: '<div><button @click="goRegister">跳转到注册页面</button></div>',
methods:{
goRegister: function () {
// 用编程的方式控制路由跳转
this.$router.push('/register');
}
}
}
5.2编程式导航参数规则
router.push() 方法的参数规则
// 字符串(路径名称)
router.push ('/home')
//对象
router.push({path: '/ home'})//命名的路由(传递参数)
router.push({name: '/user', params: { userId: 123 }})
//带查询参数,变成/register?uname=lisi
router.push({ path: '/register', query: { uname: 'lisi' }})
6.vue-router命名路由
6.1命名路由的匹配规则
为了更加方便的表示路由的路径,可以给路由规则起一个别名,即为“命名路由”。
const router = new VueRouter ({
routes: [
path: '/user/:id' ,
name: 'user" ,
component: User
]
})
<router-link :to="{ name : 'user', params : { id: 123 } }">User</router-link>
router.push ({ name: 'user', params: { id: 123 }})