1.路由
概念:根据不同的用户事件,显示不同页面的内容
本质:用户事件与事件处理函数之间的对应关系
(1)实现简易的前端路由
基于URL中的hash实现(点击菜单的时候改变URL的hash,根据hash的变化控制组件的切换)
(2)vue Router
基本使用步骤:
①引入相关库文件
②添加路由链接
③添加路由填充位
④定义路由组件
⑤配置路由规则并创建实例对象
⑥将路由挂载到根实例中
2.路由的基本使用
(1)路由重定向
(2)嵌套路由用法
- 点击父级路由链接显示模板内容
- 模板内容中有自己路由链接
- 点击子级路由链接显示子级模板内容
e.g:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./lib/vue_2.5.22.js"></script>
<script src="./lib/vue-router_3.0.2.js"></script>
</head>
<body>
<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:`
<div>
<h1>user组件</h1>
</div>`
}
const Register = {
template:`
<div>
<h1>user组件</h1>
<hr/>
<router-link to="/register/tab1">tab1</router-link>
<router-link to="/register/tab2">tab2</router-link>
<router-view></router-view>
</div>`
}
const tab1 = {
template:`<h1>1</h1> `
}
const tab2 = {
template:`<h1>2</h1> `
}
//创建路由实例对象
const router = new VueRouter({
routes:[
{path:'/',redirect:'/user'},
// component只接受组件对象,写成字符串会报错的
{path:'/user',component: User},
{path:'/register',component: Register,children:[{path:'/register/tab1',component: tab1},{path:'/register/tab2',component: tab2}]}
]
})
const vm = new Vue({
el:'#app',
data:{},
// 挂载路由实例对象
router
})
</script>
</body>
</html>
3.动态匹配路由
(1)通过动态参数进行路由匹配
(2)路由组件传递参数
$route对应路由形成高度耦合,不够灵活,所以可以通过propsj将组件和路由解耦
①props值为布尔类型
②props值为对象类型
缺点:不能获取id值,接受的数据只能是props里的
③props值为函数类型
4.命名路由
为了更加方便的表示路由的路径,可以给路由规则起别名
5.编程式导航
(1)页面中导航的两种方式
(2)编程式导航基本用法
push中传哈希地址,go中代表前进与后退,若n的值为1则在历史记录中前进一步,-1后退一步
e.g:实现页面导航