【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 ...
随机推荐
- tkinter的GUI设计:界面与逻辑分离(三)-- 多页面
知识点: 使用 tkinter.Frame.tkraise() 函数去提升当前 tkinter.Frame 的 z 轴顺序,使得多个 tkinter.Frame 的可见性得以切换 本文基于:win7 ...
- 9.26 开课第二十三天 (JS表单验证)
<form action="lizi1.html" method="post"> 非空验证 <input type="text&qu ...
- 【转载】COM 组件设计与应用(四)——简单调用组件
原文:http://vckbase.com/index.php/wv/1211.html 一.前言 同志们.朋友们.各位领导,大家好. VCKBASE 不得了, 网友众多文章好. 组件设计怎么学? 知 ...
- tornado-About Web
1.轻量级的web开发框架,没有像django那样的命令行工具,只用于写一些小的脚本 (1)安装tornado包 pip intall tornado # conda install tornado( ...
- P3592 [POI2015]MYJ
P3592 [POI2015]MYJ 一道比较烦的区间dp.. 昨天上课讲到了这题,然后就在lg翻到了 然后调了很久很久..... 设\(f[l][r][k]\)为区间\([l,r]\)中,最小值\( ...
- c语言数字图像处理(六):二维离散傅里叶变换
基础知识 复数表示 C = R + jI 极坐标:C = |C|(cosθ + jsinθ) 欧拉公式:C = |C|ejθ 有关更多的时域与复频域的知识可以学习复变函数与积分变换,本篇文章只给出DF ...
- Unity扩展编辑器四
Inspector视图中的get/set使用 get set使用起来很方便,但编辑时,在Inspector视图中问题就来了,因为get/set的属性即使是public了,但是在Inspector视图 ...
- Window10家庭版启动hyper-v虚拟机组件
在安装docker的时候发现如果直接使用docker for windows,对系统的要求是window10专业版或企业版,家庭版本身没有hyper-v,不能支持 虚拟化.但是后来我在搜索过程中发现, ...
- .NetCore下使用EF DbFirst操作MySql
新建.NetCore的控制台项目 使用Nuget安装Pomelo.entityframeworkcore.mysql 工程右键--->编辑.csproj文件,把以下内容写入到工程文件 <I ...
- ActiveMQ笔记:管理和监控
ActiveMQ提供了比较丰富的监控和管理工具.在ActiveMQ的网页里(http://activemq.apache.org/how-can-i-monitor-activemq.html)提到了 ...