【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 ...
随机推荐
- 2115: [Wc2011] Xor
2115: [Wc2011] Xor 链接 分析: 对于图中的一个环,是可以从1到这个环,转一圈然后在回到1的,所以可以一开始走很多个环,然后在走一条1到n的路径. 那么可以求出所有的环,加入到线性基 ...
- vscode 运行起来
1;需要安装yarn等一些列插件 2:运行yarn 和yarn serve -- open
- 部署jenkins问题
总结:配置的url,jenkins部署的ip必须有开放,否则发布会超时失败
- python继承与多继承
1.类与对象里的父类与子类(继承): 类的继承主要是指自子类对于之前父类的方法的继承,如果子类里面写了父类里的方法,则它会将父类里的方法覆盖掉,从而不能再调用到父类的方法. 2.为了解决父类与子类里的 ...
- Ubuntu下载磁力链接,torrent,迅雷链接
用ubuntu下载电影:磁力链接,torrent,迅雷链接 需要软件:Ktorent, Amule 安装软件: sudo apt-get install ktorrent sudo apt-get i ...
- RAID卡的结构详解
软件RAID的缺点如此之多,使人们不断地思考更多实现RAID的方法.既然软件缺点太多,那么用硬件实现如何呢? RAID卡就是一种利用独立硬件来实现RAID功能的方法.要在硬件上实现RAID功能,必须找 ...
- 高可用OpenStack(Queen版)集群-3.高可用配置(pacemaker&haproxy)
参考文档: Install-guide:https://docs.openstack.org/install-guide/ OpenStack High Availability Guide:http ...
- MATLAB2018a与2016b分类学习模型Java库向上兼容操作
matlab2016版本无法兼容matlab2018版本Classification Learner创建的分类器 在java环境下,使用matlab2016版本调用matlab2018版本Classi ...
- python json模块使用详情
python其他知识目录 #json.数据交换用到json文件.json是特殊的字符串.访问网站,返回的就是json 1.json简介: 定义:JSON(JavaScript Object Notat ...
- 多种方法实现左右固定,中间自适应的CSS布局
布局是面试中常问的问题,尤其是这类的题目,怎么答才好呢? 大多数人的第一个方法是浮动,没错,浮动.第二个方法呢?你回答定位,没错.第三个方法呢?.... 第四个方法呢?第五个方法呢?.... 其实能想 ...