Vue的路由项目
一、创建vue-cli项目
首先来到终端，切换到自己项目要存放的路径，之后输入创建项目的指令：
vue init webpack-simple 项目名 这个创建的是更简洁的vue-cli项目
如果使用npm install 安装很缓慢，建议去安装淘宝镜像的cnpm 这样下载安装就会快得多
https://blog.****.net/qq_40976321/article/details/94079344
之后使用自己的编辑工具打开这个项目，我这里使用的是Hubuilder工具打开的，然后启动我们的项目
接下来我们要开始创建我们的项目，下面是项目的内容
创建好所有用到的组件
- 搭建我们的导航页面，引用bootStrap4来搭建，来到官网 https://v4.bootcss.com/ 复制样式的CDN
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
Index页面中引入bootStrapCDN
来到header组件中，来实现我们的导航
去源代码里面找
复制下来
<a class="py-2" href="#"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="d-block mx-auto"><circle cx="12" cy="12" r="10"></circle><line x1="14.31" y1="8" x2="20.05" y2="17.94"></line><line x1="9.69" y1="8" x2="21.17" y2="8"></line><line x1="7.38" y1="12" x2="13.12" y2="2.06"></line><line x1="9.69" y1="16" x2="3.95" y2="6.06"></line><line x1="14.31" y1="16" x2="2.83" y2="16"></line><line x1="16.62" y1="12" x2="10.88" y2="21.94"></line></svg> </a>
Header组件部分弄好之后，让Header组件与App.vue组件实现关联，展示页面
来到App.vue界面中，清空原本的内容
组件的注册有两种
Components:{
appHeader:Header // <app-header>< /app-header>
或者
“app-header”:Header // <app-header>< /app-header>
}
2、安装路由 实现配置路由跳转
输入指令npm install vue-router –save
或者 cnpm install vue-router –save （已安装淘宝镜像）
安装好之后来配置我们的路由，来到main.js中，引入路由模块，之后配置，将router添加到实例化对象之中
在Header组件中，a标签的href更改为我们路由设置的路径目录
我们在点击导航栏的时候回发现，会刷新，因为使用的是a标签，所有a标签改成router-link标签
之后将所有的router-link 的to 改好
在App.vue中设置组件展示区域
之后终端中输入 npm run dev 重新启动项目
实现效果之后，在main.js中将所有组件添加进来，配置路由
知识扩展：
一、路由小细节（redirect 和 tag）
动态绑定链接
Redirect 实现跳转
二、路由name属性及跳转方法
动态绑定链接，我们可以通过给路由起个名字，之后去调用它实动态绑定链接
绑定链接
实现路由的跳转
this.$router.go(-1); //跳转到上一次浏览的页面
this.$router.replace("/menu"); //指定跳转的地址
this.$router.replace({name:'loginLink'}); //指定跳转路由的名字下
this.$router.push('/menu'); //通过push进行跳转
this.$router.push({name:'menuLink'})
三、路由嵌套：二级路由及三级路由
在about文件夹中创建几个组件contact.vue delivery.vue(快递信息)
History.vue(历史订单) OrderingGuide.vue(点餐引导)，制作导航信息栏
1、二级路由：引入组件，配置二级路由
在contact组件中添加内容
页面效果
2、三级路由：引入组件，配置三级路由，在concate组件中添加三级路由，创建一个concate文件夹并创建对应的组件，并往组件内随意添加一点内容
添加路由及视图
效果展示
设置默认展示的内容
四、路由的导航守卫方式全局守卫、路由独享的守卫、组件内的守卫
1、全局守卫（会让我们在未登陆状态下，引导我们去登录界面）
router.beforeEach((to,from,next) 里面是一个回调函数 ,是全局守卫给我们传递过来的一个参数
to 表示你要进入到那个路由里面
from 是你从那个路由离开
next 决定你是否要展示的一个页面
后置钩子
点击确定之后就可以显示界面了
2、路由独享守卫
与全局守卫，基本上操作是一样的，但是作用范围是不一样的，全局守卫作用于所有的组件，路由独享作用于你所控制的路由部分。
将next设置为：next(false)就不会实现跳转了
页面效果
优化跳转条件，判断是否登录
3、组件内的守卫
来到Admin组价中，创建组件内守卫
可以在next中写回调，当执行next（）中是异步的内容时，前面的数据早就渲染成功，可以帮助我们拿到内容
离开组件时
项目源码
链接：https://pan.baidu.com/s/13BfOqnKV4itHVI9yqcAtyg
提取码：lw4w
五、复用router-view
我们先注释掉Admin中的内容
我们写的路由信息及路由配置，我们可以将其抽离，到一个文件中，单独存放路由
在src下创建一个路由文件routes.js
将组件文件引入，配置路由，再将路由公开
在main.js中将routes文件引入
之后来到我们的页面中，看能否正常访问，能正常访问，表示路由文件转移成功了
复用routes-view,在主页上添加要使用的组件，设置默认组件
成功展示界面
项目源码链接：https://pan.baidu.com/s/1Ktj6g4W9Y76PeuD6a8T5Sg
提取码：ui5i
六、路由控制滚动成功
Home组件中布局添加样式
页面效果
设置滚动位置
页面显示效果，滚动条空出一部分内容
跳转到选择器的位置
如果本教程还有不清楚的，建议可以去看看相关的视频：
https://ke.qq.com/user/index/index.html#/plan/cid=279700&term_id=100331213