圆月山庄资源网

Vue中通过vue-router实现命名视图的问题
网络编程 2024/12/23 佚名
3 2
圆月山庄资源网 Design By www.vgjia.com

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

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

<script>
 var header={
  template:"<h1>头部</h1>"
 }
 var leftBox={
  template:"<h1>左侧边栏</h1>"
 }
 var mainBox={
  template:"<h1>主体</h1>"
 }

 // 创建路由对象
 var router=new VueRouter({
  routes:[
   // 使用components属性 一个路径下挂载多个子组件
   {path:"/",components:{
    // 默认展示的组件
    "default":header,
    // 为组件命名
    "left":leftBox,
    "main":mainBox
   }}
  ]
 })

 var vm=new Vue({
  el:'#app',
  data:{},
  methods:{},
  // 挂载路由对象
  router
 });
</script>

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

<div id="app">
	<!-- 不指定name 则使用默认(default)的组件 -->
	<router-view></router-view>
	<!-- 为<router-view>指定name 该<router-view>只能放指定name的组件 -->
	<router-view name="left"></router-view>
	<router-view name="main"></router-view>
</div>

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

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

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

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

1、Hash模式： 

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

2、History模式： 

    HTML5 History API提供了一种功能，能让开发人员在不刷新整个页面的情况下修改站点的URL，就是利用 history.pushState API 来完成 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命名视图,vue,vue-router,vue,命名视图
圆月山庄资源网 Design By www.vgjia.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
圆月山庄资源网 Design By www.vgjia.com
www.vgjia.com 圆月山庄资源网
139,976互联网资源
144,792高清电影
21,817无损音乐
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接