393 vue路由介绍，路由的基本使用
零、路由介绍
- 路由 ： 是浏览器 URL 中的哈希值( # hash) 与 展示视图内容 之间的对应规则。
- 简单来说，路由就是一套映射规则(一对一的对应规则)， 由开发人员制定规则.
- 当 URL 中的哈希值(
#hash) 发生改变后，路由会根据制定好的规则， 展示对应的视图内容
- 为什么要学习路由?
- 在 web App 中， 经常会出现通过一个页面来展示和管理整个应用的功能.
- SPA 往往是功能复杂的应用，为了有效管理所有视图内容，前端路由 应运而生.
- vue 中的路由 ： 是 hash 和 component 的对应关系， 一个哈希值对应一个组件
一、路由的基本使用
准备工作 (3个)
- 安装 ：
npm i vue-router - 引入 ：
<script src="./vue.js"></script>
// 千万注意 ：引入路由一定要在引入vue之后，因为vue-router是基于vue工作的
<script src="./node_modules/vue-router/dist/vue-router.js"></script>
- 实例路由对象 + 挂载到vue上
- 实例路由对象 ：
const router = new VueRouter() - 挂载到vue上 ：
new Vue({ router，data，methods }) - 验证路由是否挂载成功， 就看打开页面，最后面有没有个
#/
- 实例路由对象 ：
具体步骤 (4个)
-
1.入口
-
2.路由规则
-
3.组件
-
4.出口
# 1. 入口
// 方式1 ： url地址为入口 调试开发用
输入url地址 改变哈希值 `01-路由的基本使用.html#/one`
// 方式2 ： 声明式导航 ： router-link + to (见下面介绍)
# 2. 路由规则
// path ： 路由路径
// component ： 将来要展示的路由组件
routes： [
{ path： '/one'， component： One }，
{ path： '/two'， component： Two }
]
# 3. 组件
// 使用返回值的这个组件名称
const One = Vue.component('one'， {
template： ` <div> 子组件 one </div> `
})
# 4. 出口
<!-- 出口 组件要展示的地方-->
<router-view></router-view>
# 总结
拿到入口哈希路径， 根据路由匹配规则，找到对应的组件，显示到对应的出口位置
01-路由的基本使用.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<!--
准备工作 (3个)
1. 安装路由 npm i vue-router
2. 引入路由
3. 实例化路由 + 挂载到vue上
具体步骤 (4个)
1. 入口 (哈希值) 手动在url上写 /one
2. 规则 routes
3. 组件
4. 出口
-->
<div id="app">
<!-- 第四步 : 出口 占位置 【出口router-view在哪里，就在哪里显示组件。】【vue-router.js中内置了vueRouter】 -->
<router-view></router-view>
</div>
<script src="./vue.js"></script>
<script src="./node_modules/vue-router/dist/vue-router.js"></script>
<script>
// 第三步 : 路由组件 【路由组件要写在路由实例对象前，否则报错。】
// 【和路由配合的时候，【局部】组件就不需要到 Vue实例 中注册了。】
const One = {
template: `<div>one组件</div>`
}
// 实例化路由
const router = new VueRouter({
// 第二步 : 路由的匹配规则 一个哈希值 对应一个组件
routes: [{
path: '/one',
component: One
}]
})
const vm = new Vue({
router,
el: '#app',
data: {}
})
</script>
</body>
</html>
