路由
路由的本质就是对应关系：
分为前端路由、后端路由
后端路由
- 概念：根据不同的用户 URL 请求，返回不同的内容
- 本质：URL 请求地址与服务器资源之间的对应关系
前端路由
通过SPA 实现单页面内容更新、
SPA实现原理:基于URL地址的hash(hash的变化会导致浏览器记录访问历史的变化、但是hash的变化不会触发新的URL请求)
前端路由
- 概念：根据不同的用户事件，显示不同的页面内容
- 本质：用户事件与事件处理函数之间的对应关系
– 前端路由主要做的事情就是监听事件并分发执行事件处理函数
–前端路由是依靠基于hash值(锚链接)的变化进行实现
![在这里插入图片描述]()
实现简易前端路由
基于URL中的hash(锚链接)实现（点击菜单的时候改变URL的hash，根据hash的变化控制组件的切换）
// 监听 window 的 onhashchange 事件，根据获取到的最新的 hash 值，切换要显示的组件的名称
window.onhashchange = function() {
// 通过 location.hash 获取到最新的 hash 值
}
Vue Router
Vue Router描述
用于SPA应用开发
功能
支持HTML5、历史模式、hash模式、支持嵌套路由、
支持路由参数、支持编程式路由、支持命名路由
vue-router的基本使用
基本使用
1. 引入相关的库文件
2. 添加路由链接
3. 添加路由填充位
4. 定义路由组件
5. 创建路由实例并配置路由规则
6. 把路由挂载到 Vue 根实例中
<body>
<div id='app' v-cloak>
<!-- 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>
</div>
</body>
<!-- 1、导入路由库文件 -->
<script src="js/vue.js"></script>
<script src="js/vue-router_3.0.2.js"></script>
<script>
// 4、定义路由组件
const User = {
template: '<h1>User 组件</h1>'
}
const Register = {
template: '<h1>register 组件</h1>'
}
// 5、创建路由实例对象与定义路由规则
const router = new VueRouter({
//定义路由规则
//routes指多个路由规则
//components只接收组件对象
routes: [
// 每个路由规则都是一个配置对象，其中至少包含 path 和 component 两个属性：
// path 表示当前路由规则匹配的 hash 地址
// component 表示当前路由规则对应要展示的组件
{ path: '/user', component: User },
{ path: '/register', component: Register }
]
})
var vm = new Vue({
//挂载元素
el: '#app',
//6、挂载路由实例对象、让路由规则生效
router,
//数据模型
data: {
},
//方法
methods: {
},
created() {
},
//DOM挂载完毕
mounted() {
}
})
</script>
路由重定向
路由重定向：可以通过路由重定向为页面设置默认展示的组件
var router = new VueRouter({
routes: [
// 其中，path 表示需要被重定向的原地址，redirect 表示将要被重定向到的新地址
{path:'/', redirect: '/user'},
{path:'/user',component: User},
{path:'/register',component: Register}
]
})
嵌套路由
概念:当我们进行路由的时候显示的组件中还有新的子级路由链接以及内容。
1、定义父级路由链接、创建填充位
2、在父级路由组件中定义子路由链接、子路由填充位
3、创建子路由组件
4、在父路由规则中通过children属性定义子级路由规则
var User = { template: "<div>This is User</div>" }
//Login组件中的模板代码里面包含了子级路由链接以及子级路由的占位符
var Login = { template: `<div>
<h1>This is Login</h1>
<hr>
<router-link to="/login/account">账号密码登录</router-link>
<router-link to="/login/phone">扫码登录</router-link>
<!-- 子路由组件将会在router-view中显示 -->
<router-view></router-view>
</div>` }
//定义两个子级路由组件
var account = { template:"<div>账号：<input><br>密码：<input></div>"};
var phone = { template:"<h1>扫我二维码</h1>"};
var myRouter = new VueRouter({
//routes是路由规则数组
routes: [
{ path:"/",redirect:"/user"},
{ path: "/user", component: User },
{
path: "/login",
component: Login,
//通过children属性为/login添加子路由规则
children:[
{ path: "/login/account", component: account },
{ path: "/login/phone", component: phone },
]
}
]
})
var vm = new Vue({
el: '#app',
data: {},
methods: {},
router:myRouter
});
动态路由匹配
概念:把路由中那些变化的值形成路由参数、这些参数叫动态路由匹配
应用：通过动态路由参数的模式进行路由匹配
路由传递参数
$route.params用于接收动态路由的参数
//在路由组件中通过$route.params获取路由参数
var User = { template:"<div>用户：{{$route.params.id}}</div>"}
var myRouter = new VueRouter({
//routes是路由规则数组
routes: [
//通过/:参数名 的形式传递参数
{ path: "/user/:id", component: User },
]
})
路由组件传递参数(props值为true)
在定义规则中通过props:true开启路由传参
在定义的组件中使用props接收路由参数
//在User组件中访问匹配的路由参数
const User = {
// 在定义组件中使用props接收参数
props: ['id'],
template: '<h1>User 组件------用户id为: {{id}}</h1>'
}
// 创建路由实例对象与定义路由规则
const router = new VueRouter({
//routes指多个路由规则
routes: [
//props开启动态路由传递参数
{ path: '/user/:id', component: User,props: true },
]
})
路由组件传递参数(props值为对象)
传递了对象此时、对象中数据为静态数据、id值接收不到
在组件中通过props接收参数时、直接写对象的键
//在User组件中访问匹配的路由参数
const User = {
// 在定义组件中接收参数
//在组件中使用props接收参数时、通过对象中属性名接收参数
props: ['id','uname','age'],
//使用参数
template: '<h1>User 组件------用户id为: {{id}}-----姓名为:{{uname}}、今年{{age}}岁</h1>'
}
const router = new VueRouter({
routes: [
// 设置动态路由参数
//props开启动态路由传递参数/对象类型
{ path: '/user/:id', component: User,props: {uname:'list',age:20} },
]
})
路由组件传递参数(props值为函数)
既能接收对象(静态)参数、又能接收路由(静态)参数
//在User组件中访问匹配的路由参数
const User = {
// 在定义组件中接收参数
props: ['id', 'uname', 'age'],
template: '<h1>User 组件------用户id为: {{id}}-----姓名为:{{uname}}、今年{{age}}岁</h1>'
}
const router = new VueRouter({
routes: [
// 设置动态路由参数
//props开启函数方式传递参数
//id通过rou动态匹配了路由参数
{ path: '/user/:id', component: User, props: route => ({ uname: 'zs', age: 20, id:route.params.id }) }
]
})
命名路由
命名路由：给路由规制对象起一个别名：及命名路由
//这儿通过命名路由实现页面的跳转、传参
//:表示动态绑定、user表示指定页面跳转、params指命名路由参数
<router-link :to="{user:'user',params:{id:3}}">user3</router-link>
var myRouter = new VueRouter({
//routes是路由规则数组
routes: [
//通过name属性为路由添加一个别名
{ path: "/user/:id", component: User, name:"user"},
]
})
编程式导航
声明式导航:通过点击链接的方式实现的导航
编程式导航:调用js的api方法实现导航
声明式导航:
<router-link to="/user/2">user2</router-link>
编程式导航：
methods: {
goReg() {
//在方法中通过调用push方法跳转到指定路由页面
this.$router.push('/register')
}
}
methods: {
goBack() {
//在方法中通过调用go()方法使页面回退或者前进
this.$router.go(-1)
}
}
