详解vue-router 命名路由和命名视图
说明：vue-router的几个文章中例子是连贯的，因此对哪块有疑问请翻阅按发表时间排序的其他文章。
一、概述
- 给路由定义不同的名字，根据名字进行匹配
- 给不同的router-view定义名字，router-link通过名字进行对应组件的渲染。
二、代码展示：
目录视图
1、命名路由
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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
1. 前言 本小节我们介绍如何使用 VueRouter 命名路由。包括如何定义命名路由、如何使用路由名实现路由跳转。本节的学习内容相对简单，相信同学们看完本小节，并对小节中的案例自己实现一遍就可以熟练掌握了。 2. 定义路由名 在之前的小节中，我们学习了如何定义一个路由： const router = new VueRouter({ routes: [ { path: '/
-
推荐直接使用官方 vue-router，VUX部分组件支持link属性直接支持vue-router的路由参数，vux2模板内置了vue-router。 如果使用了过渡(转场动画)，在iPhone上使用左划返回时动画会再执行一遍，目前没有找到可行的处理方法，如果你有处理方案，欢迎PR。 https://github.com/airyland/vux/pull/2259
-
本文向大家介绍Vue.js路由vue-router使用方法详解，包括了Vue.js路由vue-router使用方法详解的使用技巧和注意事项，需要的朋友参考一下 vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的
-
本文向大家介绍Python命名空间详解，包括了Python命名空间详解的使用技巧和注意事项，需要的朋友参考一下 通俗的来说，Python中所谓的命名空间可以理解为一个容器。在这个容器中可以装许多标识符。不同容器中的同名的标识符是不会相互冲突的。理解python的命名空间需要掌握三条规则： 第一，赋值（包括显式赋值和隐式赋值）产生标识符，赋值的地点决定标识符所处的命名空间。 第二，函数定义（包括de
-
1. 前言 本小节我们介绍如何使用 VueRouter 命名视图。包括如何定义命名视图、如何使用命名视图。本节的学习内容相对简单，相信同学们看完本小节，并对小节中的案例自己实现一遍就可以熟练掌握了。 2. 定义视图名 2.1 默认视图 在之前的小节中，我们学习来如何使用 <router-view/> 来承载路由分发的内容。我们并没有给 <router-view/> 指定一个 name 属性，实际上
-
本文向大家介绍详解vue2路由vue-router配置（懒加载），包括了详解vue2路由vue-router配置（懒加载）的使用技巧和注意事项，需要的朋友参考一下 vue路由配置以及按需加载模块配置 1、首先在component文件目录下写俩组件： First.vue: Second.vue: 2、router目录下的index.js文件配置路由信息： 3、main.js中引入路由配置文件： 4、