1 路由相关
- 路由的本质：一种对应关系。比如说输入要访问的url地址，浏览器要去请求这个url地址对应的资源。
- 前端路由：依靠hash值(锚链接)的变化进行实现。即 监听事件并分发执行事件处理函数，从而根据不同的事件来显示不同的页面内容。
- 前端路由的核心实现：onhashchange 可以监听hash值变化
window.onhashchange = function(){
//location.hash可以获取到最新的hash值
console.log(location.hash);
}
2 简易路由实现tab栏切换
<!-- 被 vue 实例控制的 div 区域 -->
<div id="app">
<!-- 切换组件的超链接 -->
<a href="#/zhuye">主页</a>
<a href="#/keji">科技</a>
<a href="#/caijing">财经</a>
<a href="#/yule">娱乐</a>
<!-- 根据 :is 属性指定的组件名称，把对应的组件渲染到 component 标签所在的位置 -->
<!-- 可以把 component 标签当做是【组件的占位符】 -->
<component :is="comName"></component>
</div>
<script>
// 定义需要被切换的 4 个组件
// 主页组件
const zhuye = {
template: '<h1>主页信息</h1>'
}
// 科技组件
const keji = {
template: '<h1>科技信息</h1>'
}
// 财经组件
const caijing = {
template: '<h1>财经信息</h1>'
}
// 娱乐组件
const yule = {
template: '<h1>娱乐信息</h1>'
}
// vue 实例对象
const vm = new Vue({
el: '#app',
data: {
comName: 'zhuye'
},
// 注册私有组件
components: {
zhuye,
keji,
caijing,
yule
}
})
// 监听 window 的 onhashchange 事件，根据获取到的最新的 hash 值，切换要显示的组件的名称
window.onhashchange = function() {
// 通过 location.hash 获取到最新的 hash 值
console.log(location.hash);// 输出 #/zhuye 或者 #/keji ...
// slice(1) 从/开始截取字符串
switch (location.hash.slice(1)) {
case '/zhuye':
vm.comName = 'zhuye'
break
case '/keji':
vm.comName = 'keji'
break
case '/caijing':
vm.comName = 'caijing'
break
case '/yule':
vm.comName = 'yule'
break
}
}
</script>
效果：点击每个超链接之后，地址栏发生变化，相应的内容切换
3 Vue Router
- Vue.js官方提供的前端路由管理器
- 依赖于Vue。所以需要先引入Vue，再引入Vue Router
使用方式：
<head>
<!-- 1 导入 vue 文件 -->
<script src="./lib/vue_2.5.22.js"></script>
<script src="./lib/vue-router_3.0.2.js"></script>
</head>
<body>
<!-- 被 vm 实例所控制的区域 -->
<div id="app">
<!-- 2 添加路由链接:是路由中提供的标签，默认会被渲染为a标签
to属性默认被渲染为href属性，to属性的值会被渲染为#开头的hash地址 -->
<router-link to="/user">User</router-link>
<router-link to="/register">Register</router-link>
<!--3 添加路由填充位（占位符） -->
<router-view></router-view>
</div>
<script>
// 4 定义路由组件
const User = {
template: '<h1>User 组件</h1>'
}
const Register = {
template: '<h1>Register 组件</h1>'
}
// 5 创建路由实例对象，并配置路由规则
const router = new VueRouter({
// 路由规则
routes: [{
//path设置为/表示页面最初始的地址 / ,redirect表示要被重定向的新地址
path: '/',
redirect: '/user'
}, {
path: '/user',
component: User
}, {
path: '/register',
component: Register
}]
})
// 创建 vm 实例对象
const vm = new Vue({
// 指定控制的区域
el: '#app',
data: {},
// 6 挂载路由实例对象
// router: router
router
})
</script>
</body>
效果：
4 嵌套路由
进行路由的时候显示的组件中还有新的子级路由链接以及内容。
比如以下路由：
-
/user
-
/register
- /register/tab1
- /register/tab2
<head>
<!-- 1 导入 vue 文件 -->
<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: '<h1>User 组件</h1>'
}
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>`
}
const Tab1 = {
template: '<h3>tab1 子组件</h3>'
}
const Tab2 = {
template: '<h3>tab2 子组件</h3>'
}
// 创建路由实例对象
const router = new VueRouter({
routes: [
{ path: '/', redirect: '/user'},
{ path: '/user', component: User },
// children 数组表示子路由规则
{ path: '/register', component: Register, children: [
{ path: '/register/tab1', component: Tab1 },
{ path: '/register/tab2', component: Tab2 }
] }
]
})
// 创建 vm 实例对象
const vm = new Vue({
el: '#app',
data: {},
// 挂载路由实例对象
// router: router
router
})
</script>
</body>
效果：
5 动态路由匹配
（1）通过$route.params.id来获取路径传参
<body>
<div id="app">
<router-link to="/user/1">User1</router-link>
<router-link to="/user/2">User2</router-link>
<router-link to="/user/3">User3</router-link>
<!-- 路由占位符 -->
<router-view></router-view>
</div>
<script>
const User = {
template: '<h1>User 组件 -- 用户id为: {{$route.params.id}}</h1>'
}
// 创建路由实例对象
const router = new VueRouter({
// 所有的路由规则
routes: [{
path: '/',
redirect: '/user'
}, {
//通过/:参数名 的形式传递参数
path: '/user/:id',
component: User
}
]
})
// 创建 vm 实例对象
const vm = new Vue({
// 指定控制的区域
el: '#app',
data: {},
// 挂载路由实例对象
// router: router
router
})
</script>
（2）通过props设置为true来接收参数
const User = {
props: ['id'],
template: '<h1>User 组件 -- 用户id为: {{id}}</h1>'
}
// 创建路由实例对象
const router = new VueRouter({
// 所有的路由规则
routes: [{
path: '/',
redirect: '/user'
}, {
path: '/user/:id',
component: User,
//如果props设置为true，route.params将会被设置为组件属性
props: true
}]
})
（3）将props设置为对象，直接将对象的数据传递给组件使用
const User = {
props: ['id', 'uname', 'age'],
template: '<h1>User 组件 -- 用户id为: {{id}} -- 姓名为:{{uname}} -- 年龄为：{{age}}</h1>'
}
// 创建路由实例对象
const router = new VueRouter({
// 所有的路由规则
routes: [{
path: '/',
redirect: '/user'
}, {
path: '/user/:id',
component: User,
//如果props设置为对象，则传递的是对象中的数据给组件
props: {
uname: 'lisi',
age: 20
}
}]
})
（3）将props设置为函数，获取传递的参数值和传递的对象数据
const User = {
props: ['id', 'uname', 'age'],
template: '<h1>User 组件 -- 用户id为: {{id}} -- 姓名为:{{uname}} -- 年龄为：{{age}}</h1>'
}
// 创建路由实例对象
const router = new VueRouter({
// 所有的路由规则
routes: [
{ path: '/', redirect: '/user' },
{
path: '/user/:id',
component: User,
//如果props设置为函数，则通过函数的第一个参数获取路由对象
//并可以通过路由对象的params属性获取传递的参数
props: route => ({ uname: 'zs', age: 20, id: route.params.id })
}
]
})
243
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
