【javaEE】（8）路由的基本实现

路由可以简单的理解为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>

然后需要在index.js下设置路由

​ 导入设置路由的组件还有图中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
}
]
},

修改News.vue，添加两个跳转按钮，和一个代表动态变化的router-view

< 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.js里的createWebHashHistory修改为createWebHistory(一共有两处)。

2：其他跳转方式

六：项目的部署打包

右击整个项目——在外部资源管理器打开——在此位置打开cmd——输入npm run build

等执行完毕之后会在当前的目录下会生成一个dist的文件夹，里面就是可以直接在服务器上部署的文件了（没有vue之类的文件）