好资源导航 » 文章资讯 » Vue中通过vue-router实现命名视图的问题

Vue中通过vue-router实现命名视图的问题

2023-07-26 19:09:04 81

在用vue-router路由处理一些需求的时候例如有时需要同时同级展示多个组件而不是嵌套展示
例如：创建一个布局有侧导航和主内容两个视图此时命名视图就派上用场了

在路由对象中使用components属性以使一个路径下可挂载多个子组件：
之后即可为每个要展示的组件指定一个名字
默认name为default即不设置名字

然后在页面中使用标签进行展示在标签上指定name
若指定了name那么该只能放指定name的组件

ps：下面介绍下vue-router的原理

更新视图但不重新请求页面，是前端路由原理的核心之一，目前在浏览器环境中这一功能的实现主要有2种方式,Hash模式和History模式：

（1）利用URL中的hash("#");

（2）利用Historyinterface在HTML5中新增的方法;

1、Hash模式：

hash（#）是URL的锚点，代表的是网页中的一个位置，单单改变#后的部分，浏览器只会滚动到相应位置，不会重新加载网页，也就是说#是用来指导浏览器动作的，对服务器端完全无用，HTTP请求中也不会不包括#；同时每一次改变#后的部分，都会在浏览器的访问历史中增加一个记录，使用”后退”按钮，就可以回到上一个位置；

2、History模式：

HTML5HistoryAPI提供了一种功能，能让开发人员在不刷新整个页面的情况下修改站点的URL，就是利用history.pushStateAPI来完成URL跳转而无须重新加载页面；

通常情况下，我们会选择使用History模式，原因就是Hash模式下URL带着‘#'会显得不美观；但实际上，这样选择一不小心也会出问题；比如：

但当用户直接在用户栏输入地址并带有参数时：
Hash模式：xxx.com/#/id=5请求地址为xxx.com,没有问题;
History模式:xxx.com/id=5请求地址为xxx.com/id=5，如果后端没有对应的路由处理，就会返回404错误；

为解决这一问题，vue-router提供的方法是：

在服务端增加一个覆盖所有情况的候选资源：如果URL匹配不到任何静态资源，则应该返回同一个index.html页面，这个页面就是你app依赖的页面。

给个警告，因为这么做以后，你的服务器就不再返回404错误页面，因为对于所有路径都会返回index.html文件。为了避免这种情况，你应该在Vue应用里面覆盖所有的路由情况，然后在给出一个404页面。或者，如果你使用Node.js服务器，你可以用服务端路由匹配到来的URL，并在没有匹配到路由的时候返回404，以实现回退。

到此这篇关于Vue中通过vue-router实现命名视图的问题的文章就介绍到这了,更多相关vuevue-router命名视图内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

返回顶部
514930285
czq8825@qq.com

Vue中通过vue-router实现命名视图的问题

热门推荐

随机推荐