| 前言 |
1、路由的基本概念与原理
1.1后端路由
- 概念：根据不同的用户URL请求，返回不同的内容
- 本质：URL请求地址与服务器资源之间的对应关系
1.2前端路由 - 概念：根据不同的用户事件，显示不同的页面内容
- 本质：用户事件与事件处理函数之间的对应关系
2、 Vue Router - Vue Router是Vue.js官方的路由管理器，它和Vue.js的核心深度集成，可以非常方便的用于SPA应用程序开发
- Vue Router 包含的功能
（1）支持HTML5历史模式或hash模式
（2）支持嵌套路由
（3）支持路由参数
（4）支持编程式路由
（5）支持命名路由
2.1基本使用步骤
（1）引入相关的库文件
（2）添加路由链接
（3）添加理由填充位
（4）定义路由组件
（5）配置路由规则并创建路由实例
（6）把路由挂载到Vue根实例中
1.引入相关库文件
<!--导入Vue文件，为全局window对象挂载Vue构造函数-->
<script src="./lib/vue_2.5.22.js"></script>
<!--导入Vue-router 文件，为全局window对象挂载vueRouter构造函数-->
<script src="./lib/vue-router_3.0.2.js"></script>
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.定义路由组件
var User={
template:'<div>User</div>'
}
var Register={
template:'<div>Register</div>'
}
5.配置路由规则并创建路由实例
//创建路由实例对象
var router=new VueRouter({
//routes是路由规则数组
routes:{
//每个路由规则都是一个配置对象，其中至少包含path和component两个属性
//path表示当前路由规则匹配的hash地址
//component表示当前路由规则对应要展示的组件
{path:'/user',component:User},
{path:'/register',component:Register}
}
})
6.把路由挂载到Vue根实例中
new Vue({
el:'#app',
//为了能够让路由规则生效，必须把路由对象挂载到Vue实例对象上
router
});
3、路由重定向
路由重定向是指：用户在访问地址A的时候，强制用户跳转到地址C,从而展示特定的组件页面，通过路由规则的redirect属性，指定一个新的路由地址，可以很方便的路由重定向
var router=new VueRouter({
routes:[
//其中，path表示需要被重定向的原地址，redirect,表示将要被重定位的新地址
{path:'/',redirect:'/user'},
{path:'/user',component:User},
{path:'/register',component:Register}
]
})
4、嵌套路由用法
嵌套路由功能分析
- 点击父级路由链接显示模板内容
- 模板内容中又有子级路由链接
- 点击子级路由链接显示子模板内容
父路由组件模板 - 父级路由链接
- 父级路由填充位
<p>
<router-link to="/user">User</router-link>
<router-link to="/register">Register</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>
}
5、动态路由匹配
- 动态匹配路由的基本用法
- 应用场景
path：通过动态路由参数的模式进行路由匹配
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 VueRouter({
routes:[
//如果props被设置为ture,route.params将会被设置为组件属性
{path:'/user/:id',component:User,props:true}
]
})
const User={
props:['id'],//使用props接收路由参数
template：'<div> 用户ID：{{id}}</div>' //使用路由参数
}
2.props的值为对象类型
const router = new VueRouter({
routes:[
//如果 props是一个对象，它会被按原样设置为组件属性
{path:'/user/:id',component:User,props:{uname:'lisi',age:12}}
]
})
const User={
props:['uname','age'],
template:`<div>用户信息：{{uname + '---' + age}}</div>`
}
3.props的值为函数类型
const router = new VueRouter({
routes:[
//如果 props是一个函数，则这个函数接收route对象为自己的形参
{path:'/user/:id',
component:User,
props:routes=>{(uname:'zs',age:20,id:route.params.id)}}
]
})
const User={
props:['uname','age','id'],
template:`<div>用户信息：{{uname + '---' + age + '---'+ id}}</div>`
}
6、vue-router命名路由
命名路由配置规则
- 为了更方便的表示路由的了路径，可以给路由规则起一个别名，即为命名路由
const router = new VueRouter({
routes:[
{
path:'/user/:id',
name:'user',
component:User
}
]
})
7、vue-router编程式导航
1.页面导航的两种方式
声明式导航：通过点击链接实现盗汗的方式，也叫声明式导航
编程式导航：通过调用JavaScript形式的API实现导航的方式，也叫编程式导航
2.常用的编程式导航API如下：
this.
router.go(n)
const User = {
template:'<div><button> @click="goRegister">跳转到注册页面</button></div>',
methods:{
goRegister:function({
//编程的方式控制路由跳转
this.$router.push('/register');
}
}
}
