详解vue-router 命名路由和命名视图


Posted in Javascript onJune 01, 2018

说明:vue-router的几个文章中例子是连贯的,因此对哪块有疑问请翻阅按发表时间排序的其他文章。

一、概述

  1. 给路由定义不同的名字,根据名字进行匹配
  2. 给不同的router-view定义名字,router-link通过名字进行对应组件的渲染。

二、代码展示:

目录视图

详解vue-router 命名路由和命名视图

1、命名路由

详解vue-router 命名路由和命名视图 

2、命名视图

index.js

import Vue from 'vue'
import Router from 'vue-router'
import Goodlists from '@/Goodlists/goods'
import Title from '@/Goodlists/title'
import Img from '@/Goodlists/img'
import Cart from '@/Goodlists/cart'
Vue.use(Router)
export default new Router({
 routes: [
 {
 path: '/goods',
 name: 'Goodlists',
 components:{
 default:Goodlists,
 title:Title,
 image:Img,
 } 
 } 
 ]
})

App.vue

<template>
 <div id="app">
 <img src="./assets/logo.png">
 <router-view></router-view>
 <router-view name="title" class="left"></router-view>
 <router-view name="image" class="right"></router-view>
 </div>
</template>

<script>
export default {
 name: 'app'
}
</script>

<style>
#app {
 font-family: 'Avenir', Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
}
.left,.right{
 float: left;
 width:48%;
 text-align: center;
 border:1px solid red
}
</style>

详解vue-router 命名路由和命名视图

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js加减乘除丢失精度问题解决方法
May 16 Javascript
如何利用AngularJS打造一款简单Web应用
Dec 05 Javascript
js判断当前页面在移动设备还是在PC端中打开
Jan 06 Javascript
相册展示PhotoSwipe.js插件实现
Aug 25 Javascript
第一次接触神奇的Bootstrap
Oct 14 Javascript
微信公众号-获取用户信息(网页授权获取)实现步骤
Oct 21 Javascript
JS实现微信弹出搜索框 多条件查询功能
Dec 13 Javascript
vue利用better-scroll实现轮播图与页面滚动详解
Oct 20 Javascript
解决Jquery下拉框数据动态获取的问题
Jan 25 jQuery
js中apply和Math.max()函数的问题及区别介绍
Mar 27 Javascript
解析vue路由异步组件和懒加载案例
Jun 08 Javascript
JavaScript实现简单日历效果
Sep 11 Javascript
node.js利用socket.io实现多人在线匹配联机五子棋
May 31 #Javascript
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 #jQuery
微信小程序登录换取token的教程
May 31 #Javascript
Rollup处理并打包JS文件项目实例代码
May 31 #Javascript
手把手教你vue-cli单页到多页应用的方法
May 31 #Javascript
详解基于Node.js的HTTP/2 Server实践
May 31 #Javascript
jQuery基于Ajax实现读取XML数据功能示例
May 31 #jQuery
You might like
浅谈PHP安全防护之Web攻击
2017/01/03 PHP
php中实现字符串翻转的方法
2017/02/22 PHP
PHP 并发场景的几种解决方案
2019/06/14 PHP
指定js可访问其它域名的cookie的方法
2007/09/18 Javascript
读jQuery之六 缓存数据功能介绍
2011/06/21 Javascript
浅谈JavaScript function函数种类
2014/12/29 Javascript
js实现双击图片放大单击缩小的方法
2015/02/17 Javascript
JQuery插件Quicksand实现超炫的动画洗牌效果
2015/05/03 Javascript
jquery.gridrotator实现响应式图片展示画廊效果
2015/06/23 Javascript
JavaScript中数组继承的简单示例
2015/07/29 Javascript
HTML页面,测试JS对C函数的调用简单实例
2016/08/09 Javascript
微信小程序之ES6与事项助手的功能实现
2016/11/30 Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
2017/01/04 Javascript
在vue中使用css modules替代scroped的方法
2018/03/10 Javascript
JavaScript动态加载重复绑定问题
2018/04/01 Javascript
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
2018/05/04 Javascript
微信小程序将字符串生成二维码图片的操作方法
2018/07/17 Javascript
js prototype和__proto__的关系是什么
2019/08/23 Javascript
JavaScript React如何修改默认端口号方法详解
2020/07/28 Javascript
在vue中给后台接口传的值为数组的格式代码
2020/11/12 Javascript
Python contextlib模块使用示例
2015/02/18 Python
Python中内置数据类型list,tuple,dict,set的区别和用法
2015/12/14 Python
在阿里云服务器上配置CentOS+Nginx+Python+Flask环境
2016/06/18 Python
用生成器来改写直接返回列表的函数方法
2017/05/25 Python
python爬虫获取小区经纬度以及结构化地址
2018/12/30 Python
在 Jupyter 中重新导入特定的 Python 文件(场景分析)
2019/10/27 Python
关于Python中定制类的比较运算实例
2019/12/19 Python
Python 日期的转换及计算的具体使用详解
2020/01/16 Python
HTML5 Canvas 实现圆形进度条并显示数字百分比效果示例
2017/08/18 HTML / CSS
北美三大旅游网站之一:Travelocity
2017/08/12 全球购物
Laura Geller官网:美国彩妆品牌
2018/12/29 全球购物
蔻驰西班牙官网:COACH西班牙
2019/01/16 全球购物
2014年学雷锋活动总结
2014/06/26 职场文书
2014年机关作风建设工作总结
2014/10/23 职场文书
2015年秋季小班开学寄语
2015/05/27 职场文书
党员干部学习三严三实心得体会
2016/01/05 职场文书