Vue前端路由
路由
后端路由
- 概念：根据不同的用户URL请求，返回不同的内容
- 本质：URL请求地址与服务器资源之间的对应关系
SPA（Single Page Appliaction）
- 后端渲染(存在性能问题)
- Ajax前端渲染（前端渲染提高性能，但是不支持浏览器的前进后退操作）
- SPA（Single Page Application）单页面应用程序，整个网站只有一个页面，内部的变化通过Ajax局部更新实现，同时支持浏览器地址栏的前进和后退操作
- SPA实现原理之一：基于URL地址的hash（hash的变化会导致浏览器记录访问历史的变化、但是hash的变化不会触发新的URL请求）
- 在实现SPA过程中，最核心的技术点就是前端路由
前端路由
- 概念：根据不同的用户事件，显示不同的页面内容
- 本质：用户事件与事件处理函数之间的对应关系
实现简易前端路由
- 基于URL中的hash实现（点击菜单的时候改变URL的hash，根据hash的变化控制组件的切换
//监听window的 onhashchange事件，根据获取到的最新的hash值，切换要显示的组件的名称
window.onhashchange = function(){
//通过location.hash获取到最新的hash值
}
Vue Router
官网：https://router.vuejs.org/zh/
是Vue.js 官方的路由管理器。
它和Vue.js的核心深度集成，可以非常方便的用于SPA应用程序的开发
Vue Router包含的功能有：
- 支持HTML5历史模板或hash模式
- 支持嵌套路由
- 支持路由参数
- 支持编程式路由
- 支持命名路由
进阶
导航守卫
过渡动效
数据获取
路由懒加载
基本使用步骤
-
引入相关的库文件
- 导入vue库文件
- 导入vue-router库文件
-
添加路由链接
- 添加router-link。是vue中提供的标签，默认渲染位a标签
- to属性默认被渲染为href
<router-link to="/login" tag="button">登陆</router-link>
- 添加router-link。是vue中提供的标签，默认渲染位a标签
-
添加路由填充位
- 添加router-view。将来通过路由规则匹配到的组件，将会被渲染到router-view所在的位置
-
定义路由组件
var User = { template: '<div>User</div>' } -
配置路由规则并创建路由实例
//创建路由实例对象 var router = new Router({ // routes 是路由规则数组 routes: [ // 每个路由规则都是一个配置对象，至少包含 path和component两个属性： // path 表示当前路由规则匹配的hash地址 // component表示当前路由对应要展示的组件 {path: '/user', component: User} {path: 'register', component: register}, ] }) -
把路由挂载到Vue根实例中
new Vue({ el: '#app', // 为了能够路由规则生效，必须把路由对象挂载到vue实例对象上 router });
路由重定向
路由重定向指的是：用户在访问地址A的时候，从而展示特定的组件页面
通过路由规则的redirect属性，指定一个新的路由地址，可以很方便地设置路由的重定向
var router = new VuewRouter({
routes: [
//其中。path表示需要被重定向的原地址，redirect表示将要被重定向的新地址
{path: '/', redirect: '/user'},
{path: '/user', component: User},
]
})
嵌套路由
嵌套路由功能分析
- 点击父级路由链接显示模板内容
- 模板内容中又有子级路由链接
- 点击子级路由链接显示子级模板内容
父路由组件链接
- 父级路由链接
- 父组件路由填充
<p>
<router-link to='/user'>User</router-link>
</p>
<div>
<!--控制组件的显示位置-->
<router-view></router-view>
</div>
子级路由模板
- 子级路由链接
- 子级路由填充位
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>`
}
嵌套路由
- 父级路由通过children属性配置子级路由
const router = new Router({
routes: [
{
path: '/',
name: 'index',
component: index,
//通过children 属性，为/index 添加子路由
children: [
{path: 'register', component: register},
{path: 'login', component: login},
]
},
})
动态路由匹配的基本用法
应用场景：通过动态路由参数的模式进行路由匹配
var router = new VueRouter({
routes: [
//动态路径参数，以冒号开头
{path: '/user/:id', component: User}
]
})
const User = {
//路由组件中通过$route.params 获取路由参数
template: '<div>User {
{ $route.params.id }}</div>'
}
路由组件传递参数
$route与对应路由形成高度耦合，不够灵活，所以可以使用props将组件和路由解耦
1、props的值为布尔类型
const router = new Router({
routes: [
//如果props 被设置为 true， route.params 将会被设置为组件属性
{path: '/user/:id', component: User, props: true }
]
})
const User = {
props: ['id'], // 使用props 接收路由参数
template: `<div> 用户信息： {
{ id }} </div> ` //使用路由参数
}
2、props的值为对象类型
const router = new VueRoter((
routes: [
//如果props是一个对象，它会被按原样设置为组件属性
{path: '/user/:id', component: User, props: { uname: 'lili', age: 18}}
]
))
const User = {
props: ['uname', 'age'],
template: `<div> 用户信息： {
{ uname + '-----' +age}} </div> `
}