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的更多相关文章

  1. Vue router link

    html: <router-link to="test">Go to Foo</router-link> <router-link to=" ...

  2. 已配置好的vue全家桶项目router,vuex,api,axios,vue-ls,async/await,less下载即使用

    github 地址: https://github.com/liangfengbo/vue-cli-project 点击进入 vue-cli-project 已构建配置好的vuejs全家桶项目,统一管 ...

  3. 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 ...

  4. vue中$route 和$router的区别

    在vue中会出现一种情况 const url=this.$route.query.returnURL; this.$router.push(url);    $router和$route的区别傻傻的分 ...

  5. vue工程化与路由router

    一.介绍     vue.js 是 目前 最火的前端框架,vue.js 兼具 angular.js 和 react.js 的优点,并剔除它们的缺点.并且提供了很多的周边配套工具 如vue-router ...

  6. vue 中router.go;router.push和router.replace的区别

    vue 中router.go:router.push和router.replace的区别:https://blog.csdn.net/div_ma/article/details/79467165 t ...

  7. vue & this.$route & this.$router

    vue & this.\(route & this.\)router const User = { template: '<div>User</div>' } ...

  8. 【react router路由】<Router> <Siwtch> <Route>标签

    博客 https://www.jianshu.com/p/ed5e56994f13?from=timeline 文档 http://react-guide.github.io/react-router ...

  9. Vue04——vue自定义事件、Router、Vue-cli、发布上线

    一.Vue的自定义事件 点击任何一个按钮,按钮本身计数累加,但是每点击三个按钮中的一个,totalCounter 都要累加. <body> <div id="app&quo ...

  10. [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 ...

随机推荐

  1. tkinter的GUI设计:界面与逻辑分离(三)-- 多页面

    知识点: 使用 tkinter.Frame.tkraise() 函数去提升当前 tkinter.Frame 的 z 轴顺序,使得多个 tkinter.Frame 的可见性得以切换 本文基于:win7 ...

  2. 9.26 开课第二十三天 (JS表单验证)

    <form action="lizi1.html" method="post"> 非空验证 <input type="text&qu ...

  3. 【转载】COM 组件设计与应用(四)——简单调用组件

    原文:http://vckbase.com/index.php/wv/1211.html 一.前言 同志们.朋友们.各位领导,大家好. VCKBASE 不得了, 网友众多文章好. 组件设计怎么学? 知 ...

  4. tornado-About Web

    1.轻量级的web开发框架,没有像django那样的命令行工具,只用于写一些小的脚本 (1)安装tornado包 pip intall tornado # conda install tornado( ...

  5. P3592 [POI2015]MYJ

    P3592 [POI2015]MYJ 一道比较烦的区间dp.. 昨天上课讲到了这题,然后就在lg翻到了 然后调了很久很久..... 设\(f[l][r][k]\)为区间\([l,r]\)中,最小值\( ...

  6. c语言数字图像处理(六):二维离散傅里叶变换

    基础知识 复数表示 C = R + jI 极坐标:C = |C|(cosθ + jsinθ) 欧拉公式:C = |C|ejθ 有关更多的时域与复频域的知识可以学习复变函数与积分变换,本篇文章只给出DF ...

  7. Unity扩展编辑器四

    Inspector视图中的get/set使用 get  set使用起来很方便,但编辑时,在Inspector视图中问题就来了,因为get/set的属性即使是public了,但是在Inspector视图 ...

  8. Window10家庭版启动hyper-v虚拟机组件

    在安装docker的时候发现如果直接使用docker for windows,对系统的要求是window10专业版或企业版,家庭版本身没有hyper-v,不能支持 虚拟化.但是后来我在搜索过程中发现, ...

  9. .NetCore下使用EF DbFirst操作MySql

    新建.NetCore的控制台项目 使用Nuget安装Pomelo.entityframeworkcore.mysql 工程右键--->编辑.csproj文件,把以下内容写入到工程文件 <I ...

  10. ActiveMQ笔记:管理和监控

    ActiveMQ提供了比较丰富的监控和管理工具.在ActiveMQ的网页里(http://activemq.apache.org/how-can-i-monitor-activemq.html)提到了 ...