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. 4821: [Sdoi2017]相关分析

    4821: [Sdoi2017]相关分析 链接 分析: 大力拆式子,化简,然后线段树.注意精度问题与爆longlong问题. 代码: #include<cstdio> #include&l ...

  2. spark遇到的一些问题及其解决办法

    1.报错:ERROR storage.DiskBlockObjectWriter: Uncaught exception while reverting partial writes to file ...

  3. SpringCloud-容错处理Hystrix熔断器(五)

    前言:微服务架构应用的特点就是多服务,而服务层之间通过网络进行通信,从而支撑起整个应用系统,所以,各个微服务之间不可避免的存在耦合依赖关系.但任何的服务应用实例都不可能永远的健康或网络不可能永远的都相 ...

  4. htm5移动端开发 和 pc端开发

    htm5移动端开发: 移动端开发需要注意的一些事情:http://www.duanliang920.com/learn/web/html5/321.html HTML5移动端手机网站开发流程:http ...

  5. allure2 report+ jenkins 使用

    物色了一个挺漂亮的报告生成插件 ——allure. 下面介绍一下这个报告的使用. 1. 添加依赖 <dependencies> <!-- https://mvnrepository. ...

  6. 自己编写的:centos6.6上编译安装apache2.4+php5.6+mysql5.6【亲自】

    在centos6.6上安装apache2.4+php5.6+mysql5.6 关于wget的安装 将之前装系统的.iso文件挂载到光驱 由于我在/home/jinnan/下建立了一个cdrom文件夹 ...

  7. EventBus的基本使用步骤

    为什么要使用EventBus 当我们进行项目开发的时候,往往是需要应用程序的各组件间进行通信,比如在子线程中进行请求数据,当数据请求完毕后通过Handler或者是广播通知UI, 通常两个Activit ...

  8. Unity面试技巧之C#基础

    1. 定义常量最好使用运行是常量就是readonly 编译常量就是 const public static readonly MyClass myClass = new MyClass(); publ ...

  9. 使用tensorflow进行mnist数字识别【模型训练+预测+模型保存+模型恢复】

      import sys,os sys.path.append(os.pardir) import numpy as np from tensorflow.examples.tutorials.mni ...

  10. Git知识点整合

    Git安装 Windows上安装Git 64 位安装包下载地址 : https://github.com/git-for-windows/git/releases/download/v2.16.2.w ...