【vue】router-link 与 router-view
1 router-link
<router-link :to="{ path: '/hello', component: HelloWorld }">hello</router-link>
<router-link :to="{ path: '/user/useradd' }">user</router-link>
以上是两种写法,根据参数还会有更多中写法。
经过测试:(1)有component参数时优先router-link中配置的component,没有时从js中配置取
(2)path参数至关重要,灵活所在,/user/useradd 实际匹配了两个组件,分别是user和useradd
k { path: '/user', component:user,
children:[
{path:'/user/useradd', component:useradd},
{path:'/user/userdelete', component:userdelete}
]
}
2 router-view
<router-view> 是用来渲染通过路由映射过来的组件,当路径更改时,<router-view> 中的内容也会发生更改
<router-link :to="{ path: '/hello', component: HelloWorld }">hello</router-link>
<router-link :to="{ path: '/user/useradd' }">user</router-link>
<router-view/>
当前看主要应用于单页面中,与router-link配合,渲染router-link 映射过来的组件。
【vue】router-link 与 router-view的更多相关文章
- Vue router link
html: <router-link to="test">Go to Foo</router-link> <router-link to=" ...
- 已配置好的vue全家桶项目router,vuex,api,axios,vue-ls,async/await,less下载即使用
github 地址: https://github.com/liangfengbo/vue-cli-project 点击进入 vue-cli-project 已构建配置好的vuejs全家桶项目,统一管 ...
- vue router.push(),router.replace(),router.go()和router.replace后需要返回两次的问题
转载:https://www.cnblogs.com/lwwen/p/7245083.html https://blog.csdn.net/qq_15385627/article/details/83 ...
- vue中$route 和$router的区别
在vue中会出现一种情况 const url=this.$route.query.returnURL; this.$router.push(url); $router和$route的区别傻傻的分 ...
- vue工程化与路由router
一.介绍 vue.js 是 目前 最火的前端框架,vue.js 兼具 angular.js 和 react.js 的优点,并剔除它们的缺点.并且提供了很多的周边配套工具 如vue-router ...
- vue 中router.go;router.push和router.replace的区别
vue 中router.go:router.push和router.replace的区别:https://blog.csdn.net/div_ma/article/details/79467165 t ...
- vue & this.$route & this.$router
vue & this.\(route & this.\)router const User = { template: '<div>User</div>' } ...
- 【react router路由】<Router> <Siwtch> <Route>标签
博客 https://www.jianshu.com/p/ed5e56994f13?from=timeline 文档 http://react-guide.github.io/react-router ...
- Vue04——vue自定义事件、Router、Vue-cli、发布上线
一.Vue的自定义事件 点击任何一个按钮,按钮本身计数累加,但是每点击三个按钮中的一个,totalCounter 都要累加. <body> <div id="app&quo ...
- [Redux] Navigating with React Router <Link>
We will learn how to change the address bar using a component from React Router. In Root.js: We need ...
随机推荐
- python基础学习1-迭代器
#!/usr/bin/env python # -*- coding:utf-8 -*- #自定义迭代器 需要 重写 __iter__()和__next__() 两个魔法方法 class Fibs: ...
- 利用开源软件 Hugin 实现照片的景深合成
利用开源软件 Hugin 实现照片的景深合成 本文主要参考了下面的文章:http://macrocam.blogspot.jp/2013/09/using-hugin-for-focus-stacki ...
- How to get PrivateKey, PublicKey, Cert ID:
0. Prepare cert.pfx and its password, verify_sign_acp.cer 1. Get Private Key $ openssl pkcs12 -in ce ...
- python模块-datetime模块
上面一篇已经讲了time模块,再来学习datetime模块. datetime主要有datetime.timedelta.time.date这4个子模块. a.datetime常用的函数(dateti ...
- Linux 安装JDK Tomcat MySQL(使用Mac远程访问)
阅读本文需要一定的Linux基础 一 环境 阿里云服务器: CentOS 7.4 64位(基于RedHat) 本机: macOS High Sierra 二 压缩包 JDK http://www.or ...
- OpenCV Error: Assertion failed (scn == 3 || scn == 4) in cv::cvtColor
在python用cv2.imread()读取图片的时候一直报错,检查了图片的绝对路径是存在的. 报错的图片用skimage.io.imread()是可以读的. 查了一下,有可能是原图片文件有什么嵌入错 ...
- Python读取文件编码解码问题
用chardet检测编码 import chardet raw = open("model.json", 'rb').read() result = chardet.detect( ...
- EventBus的基本使用步骤
为什么要使用EventBus 当我们进行项目开发的时候,往往是需要应用程序的各组件间进行通信,比如在子线程中进行请求数据,当数据请求完毕后通过Handler或者是广播通知UI, 通常两个Activit ...
- Socket之简单的Unity3D聊天室__TCP协议
服务器端程序 using System; using System.Collections.Generic; using System.Linq; using System.Net; using Sy ...
- vue 使用ref获取DOM元素和组件引用
在vue中可以通过ref获取dom元素,并操作它,还可以获取组件里面的数据和方法. HTML部分: <div id="app"> <input type=&quo ...