路由可以简单的理解为URL和页面之间的一种映射关系
后端路由：
- 由后台控制显示的，显示具体的页面需要重新访问后台，后台重新返回页面。
前端路由：
- 所有需要跳转的页面已经提前加载好了。
引入前可以先把主界面先复制保存一份（App.vue），留着备用
引入插件 vue-router
cmd——输入vue ui 进入Vue项目管理器——插件——不需要搜索，如果此前没有添加过，右上角就会有添加vue router的选项，点击。
安装成功了应该是以下的样式。
二：案例实现——路由功能的实现点击箭头指向按钮，红框内会发生变化而其他部位不会变化。
首先创建在红框内变化的vue组件。一般这种vue组件是放在views文件夹下的。 （安装插件后会自动出现views和router文件夹）
自动生成的还有两个vue组件，Aboout.vue、Home.vue，再写一个News.vue和一个School.vue
-
School.vue示例
< template>
< h1>学校新闻
< /template>
< script>
< /script>
< style>
< /style>
导入设置路由的组件还有图中about的设置方法，就不需要在最上面进行import了
修改App.vue设置动态变化页面的布局位置至此我们已经能够实现在地址栏输入地址跳转了，但显然这不够人性化，所以我们需要添加几个按钮来是心啊跳转，更人性化。
在Top.vue上添加几个跳转按钮保存后就可以点击跳转了。
三：案例功能增加——路由嵌套动态变化界面里面再加动态变化界面
先写两个vue组件，HotNew.vue、FunsNew.vue，同School.vue的样式。 修改index.js，将设置News路由的部分修改为以下代码{
path: ‘/news’,
component: News,
children:[
{
path:‘hotnews’,
// 此处path没有/(斜杆符号)
component:HotNews
},
{
path:‘funsnews’,
component:FunsNews
}
]
},
< template>
< router-link to="/news/hotnews">热点新闻< /router-link>
< router-link to="/news/funsnews">媒体新闻< /router-link>
< router-view>< /router-view>
< /template>
< script>
< /script>
< style>
< /style>
当需要跳转的vue太多的时候，并且大多重复的情况下，不需要每一个对应的设置路由，可以设置动态路由
先在HotNews下设置响应跳转的链接修改index设置动态路由，作用是接收上边HotNews.vue传来的参数（1，2，3，4）给变量 id
编写一个显示的不同结果的vue组件HotNewsDetail.vue
五：一些补充小细节 1：地址栏有#如何删除？将index.vue里的createWebHashHistory修改为createWebHistory(一共有两处)。
2：其他跳转方式 六：项目的部署打包右击整个项目——在外部资源管理器打开——在此位置打开cmd——输入npm run build
等执行完毕之后会在当前的目录下会生成一个dist的文件夹，里面就是可以直接在服务器上部署的文件了（没有vue之类的文件）
