详解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 相关文章推荐
学习YUI.Ext 第六天--关于树TreePanel(Part 1)
Mar 10 Javascript
js 分页全选或反选标识实现代码
Aug 09 Javascript
Javascript中string转date示例代码
Nov 01 Javascript
Jquery实现自定义窗口随意的拖拽
Mar 12 Javascript
分享一个常用的javascript静态类
Dec 31 Javascript
javascript HTML5 canvas实现打砖块游戏
Jun 18 Javascript
详解基于vue-router的动态权限控制实现方案
Sep 28 Javascript
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 jQuery
如何在vue里添加好看的lottie动画
Aug 02 Javascript
vue 地区选择器v-distpicker的常用功能
Jul 23 Javascript
微信小程序下拉加载和上拉刷新两种实现方法详解
Sep 05 Javascript
关于vue3默认把所有onSomething当作v-on事件绑定的思考
May 15 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 数组教程 定义数组
2009/10/23 PHP
网站防止被刷票的一些思路与方法
2015/01/08 PHP
利用php实现一周之内自动登录存储机制(cookie、session、localStorage)
2016/10/31 PHP
PHP封装cURL工具类与应用示例
2019/07/01 PHP
替代window.event.srcElement效果的可兼容性的函数
2009/12/18 Javascript
jQuery 表单验证扩展(四)
2010/10/20 Javascript
jquery bind(click)传参让列表中每行绑定一个事件
2014/08/06 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库
2015/01/09 Javascript
jquery——九宫格大转盘抽奖实例
2017/01/16 Javascript
利用Jquery实现几款漂亮实用的时间轴(附示例代码)
2017/02/15 Javascript
Node.js使用Angular简单示例
2018/05/11 Javascript
Vuex 使用及简单实例(计数器)
2018/08/29 Javascript
JavaScript中七种流行的开源机器学习框架
2018/10/11 Javascript
利用JS如何获取form表单数据
2019/12/19 Javascript
JavaScript创建表格的方法
2020/04/13 Javascript
Vue列表如何实现滚动到指定位置样式改变效果
2020/05/09 Javascript
Python实现单词拼写检查
2015/04/25 Python
举例简单讲解Python中的数据存储模块shelve的用法
2016/03/03 Python
Python 元类实例解析
2018/04/04 Python
python3使用smtplib实现发送邮件功能
2018/05/22 Python
Windows下安装Scrapy
2018/10/17 Python
python找出完数的方法
2018/11/12 Python
详解Python with/as使用说明
2018/12/13 Python
用python打印菱形的实操方法和代码
2019/06/25 Python
Python2.6版本pip安装步骤解析
2020/08/17 Python
python识别验证码的思路及解决方案
2020/09/13 Python
html5教程制作简单画板代码分享
2013/12/04 HTML / CSS
c/c++某大公司的两道笔试题
2014/02/02 面试题
函授大学生自我鉴定
2014/02/05 职场文书
《诺贝尔》教学反思
2014/02/17 职场文书
员工安全承诺书
2014/05/22 职场文书
向国旗敬礼活动总结
2014/09/27 职场文书
材料员岗位职责范本
2015/04/11 职场文书
信息技术国培研修日志
2015/11/13 职场文书
如何撰写创业策划书
2019/06/27 职场文书
当你找不到方向的时候,不妨读读刘备的一生
2019/08/05 职场文书