详解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 相关文章推荐
兼容IE、FireFox、Chrome等浏览器的xml处理函数js代码
Nov 30 Javascript
Javascript实现滚动图片新闻的实例代码
Nov 27 Javascript
浅谈JavaScript的全局变量与局部变量
Jun 10 Javascript
Node.js如何自动审核团队的代码
Jul 20 Javascript
JS判断输入的字符串是否是数字的方法(正则表达式)
Nov 29 Javascript
详解jQuery中的DOM操作
Dec 23 Javascript
详解bootstrap的modal-remote两种加载方式【强化】
Jan 27 Javascript
jQuery插件MovingBoxes实现左右滑动中间放大图片效果
Feb 28 Javascript
jQuery封装animate.css的实例
Jan 04 jQuery
JS实现的base64加密解密操作示例
Apr 18 Javascript
学习LayUI时自研的表单参数校验框架案例分析
Jul 29 Javascript
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
Nov 13 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获取post中的json数据的实现方法
2011/06/08 PHP
百度ping方法使用示例 自动ping百度
2014/01/26 PHP
在Windows系统下使用PHP生成Word文档的教程
2015/07/03 PHP
jquery 插件之仿“卓越亚马逊”首页弹出菜单效果
2008/12/25 Javascript
jquery中通过过滤器获取表单元素的实现代码
2011/07/05 Javascript
jQuery实现精美的多级下拉菜单特效
2015/03/14 Javascript
JavaScript将数组转换成CSV格式的方法
2015/03/19 Javascript
js简单设置与使用cookie的方法
2016/01/22 Javascript
灵活使用数组制作图片切换js实现
2016/07/28 Javascript
浅谈Vuex@2.3.0 中的 state 支持函数申明
2017/11/22 Javascript
基于JavaScript 性能优化技巧心得(分享)
2017/12/11 Javascript
vue2.0.js的多级联动选择器实现方法
2018/02/09 Javascript
node的process以及child_process模块学习笔记
2018/03/06 Javascript
详解微信小程序input标签正则初体验
2018/08/18 Javascript
vue-cli项目中使用echarts图表实例
2018/10/22 Javascript
如何在Angular应用中创建包含组件方法示例
2019/03/23 Javascript
vue跳转方式(打开新页面)及传参操作示例
2020/01/26 Javascript
Paypal支付不完全指北
2020/06/04 Javascript
[35:39]完美世界DOTA2联赛PWL S2 FTD.C vs Rebirth 第二场 11.22
2020/11/24 DOTA
总结python爬虫抓站的实用技巧
2016/08/09 Python
Python3使用turtle绘制超立方体图形示例
2018/06/19 Python
解决Jupyter无法导入已安装的 module问题
2020/04/17 Python
CSS3实现简易版的刮刮乐效果
2016/09/27 HTML / CSS
纯CSS3实现Material Design效果
2017/03/09 HTML / CSS
Desigual英国官网:在线购买原创服装
2018/03/09 全球购物
您附近的水疗和健康场所:Spafinder(美国)
2019/07/05 全球购物
俄罗斯小米家用电器、电子产品和智能家居商店:Poood.ru
2020/04/03 全球购物
2014年寒假社会实践活动心得体会
2014/04/07 职场文书
异地年检委托书范本
2014/09/24 职场文书
清明节扫墓活动总结
2015/02/09 职场文书
大学生求职自荐信范文
2015/03/04 职场文书
复兴之路观后感
2015/06/02 职场文书
Idea连接MySQL数据库出现中文乱码的问题
2021/04/14 MySQL
go语言求任意类型切片的长度操作
2021/04/26 Golang
Python合并多张图片成PDF
2021/06/09 Python
python实现MD5进行文件去重的示例代码
2021/07/09 Python