【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 -*- 系统内置函数 n =abs(-1) #绝对值 print(n) #bytes()函数 s="离开&q ...
- C++ STL 学习笔记__(6)优先级队列priority_queue基本操作
10.2.7优先级队列priority_queue v 最大值优先级队列.最小值优先级队列 v 优先级队列适配器 STL priority_queue v 用来开发一些特殊的应用,请对stl的类 ...
- [FJOI2015]火星商店问题
[FJOI2015]火星商店问题 神仙线段树分治...不过我不会. 这题用线段树套可持久化Trie还是能写的. 常数有点大,洛谷垫底水平. // luogu-judger-enable-o2 #inc ...
- hdu2795 Billboard(线段树单点修改)
传送门 结点中的l和r表示层数,maxx表示这层最多还剩下多少宽度.根据公告的宽度取找到可以放的那一层 找到后返回层数,并修改maxx #include<bits/stdc++.h> us ...
- 【Skynet】Traceback汇总
error: ./skynet/lualib/skynet.lua:534: ./skynet/lualib/skynet.lua:156: ./logic/gate/socket_msg.lua:5 ...
- Codeblocks自动代码格式化快捷键(自带)
代码区域右击 点format use AStyle 估计也就是考试竞赛逼着用这个
- virtualbox命令行启动虚拟机和关闭虚拟机
C:\Program Files\Oracle\VirtualBox\VBoxManage.exe startvm 虚拟机名字 --type headlessC:\Program Files\Orac ...
- node上的__dirname和./的区别
概要 Node.js 中,__dirname 总是指向被执行 js 文件的绝对路径,所以当你在 /d1/d2/myscript.js 文件中写了 __dirname, 它的值就是 /d1/d2 . 相 ...
- [linux] LVM磁盘管理(针对xfs和ext4不同文件系统)
简单来说就是:PV:是物理的磁盘分区VG:LVM中的物理的磁盘分区,也就是PV,必须加入VG,可以将VG理解为一个仓库或者是几个大的硬盘LV:也就是从VG中划分的逻辑分区如下图所示PV.VG.LV三者 ...
- 华策光通信: LED可见光通信室内定位项目获最具投资价值奖
3月21日上午,一场持续3个多小时的O2O领域的创业DemoShow在深圳科兴科学园会议中心激烈上演.来自华策光通信的基于LED可见光通信室内精准定位项目作为LED与室内定位领域的跨界融合项目经过精彩 ...