文章目录
1. 路由的基本概念与原理
路由的本质
路由的本质就是对应关系
(1)后端路由
概念:根据不同的用户URL请求,服务器端返回不同的内容
本质:URL请求地址与服务器资源之间的对应关系
(2)SPA
(1)后端渲染(存在性能问题)(表单重复刷新影响体验)
(2)Ajax前端渲染(前端渲染提高性能,但是不支持浏览器的前进后退操作)(无法保存用户在网页上的浏览状态)
(3)SPA单页面应用程序:整个网站只有一个页面,内容的变化通过Ajax局部更新实现,同时支持浏览器地址栏的前进和后退操作
(4)SPA实现原理之一:基于URL地址的hash(hash的变化导致浏览器记录访问历史的变化,但是hash的变化不会触发新的URL请求)
(5)在实现SPA过程中,最核心的技术点就是前端路由
(3)前端路由
概念:根据不同的用户事件,显示不同的页面内容
本质:用户事件与事件处理函数之间的对应关系
2. 路由的使用
(1)Vue-router的基本使用
基本使用步骤:
- ①引入相关库文件
<script src="./lib/vue-2.4.0.js"></script>
<script src="./lib/vue-router-3.0.1.js"></script>
-
②添加路由链接
router-link是Vue中提供的标签,默认会被渲染为a标签
to属性默认会被渲染为href属性
to属性的值默认会被渲染为#开头的hash地址
<router-link to="/user">User</router-link>
-
③添加路由填充位(路由占位符)
将来通过路由规则匹配到的组件,将会被渲染到router-view所在的位置
<router-view></router-view>
- ④定义路由组件
const User = {
template:`<h1>User 组件</h1>`
}
- ⑤配置路由规则并创建路由实例
const router = new VueRouter({
//所有的路由规则
routes:[
{
path: '/user', component: User },
{
path: '/register', component: Register }
]
})
- ⑥把路由挂载到Vue根实例中
const vm = new Vue({
el: '#app',
data: {
},
//es6中,属性名和属性值的变量一致可以简写
// router:router
router
})
完整示例:
<div id="app">
<router-link to="/user">User</router-link>
<router-link to="/register">Register</router-link>
<router-view></router-view>
</div>
<script>
const User = {
template:`<h1>User 组件</h1>`
}
const Register = {
template:`<h1>Register 组件</h1>`
}
const router = new VueRouter({
routes:[
{
path: '/user', component: User },
{
path: '/register', component: Register }
]
})
const vm = new Vue({
el: '#app',
data: {
},
router
})
</script>
点击切换页面---->
(2)路由重定向(默认路径)
路由重定向指的是:用户在访问地址a时候,强制用户跳转到地址c,从而展示特定的组件页面;
通过路由规则的redirect
属性,指定一个新的路由地址,可以很方便的设置路由的重定向
完整代码:
<div id="app">
<router-link to="/user">User</router-link>
<router-link to="/register">Register</router-link>
<router-view></router-view>
</div>
<script>
const User = {
template:`<h1>User 组件</h1>`
}
const Register = {
template:`<h1>Register 组件</h1>`
}
const router = new VueRouter({
routes:[
//path原路径,redirect新路径
{
path